CSS选择器种类及使用方法

css选择器有通配符选择器书写格式：*+｛声名块｝并集选择器/组合选择器 书写格式;元素或类或id+“”+元素或类或id+“，”+元素或类或id｛声明块｝列：h1，h2，h3｛color：red；｝层次选择器 ：子集选择器： 格式:父级元素名称+">"+子级元素名称+{声明块}例:div>p{color:red;}后代选择器： 格式:祖先元素名称+空格+后代元素名称+{声明块}例:div p{color:red;}兄第选择器： 格式: A元素名称+"+"+B元素名称+{声明块}例:div+P{color:red;} 注:选择A元素后的B元素,AB之间不许有其他元素.通用选择器： 格式:同级元素A+"~"+同级元素B+{声明块}例:div~p{color:red;} 注:表示选择与A元素同级别的所有B元素(B的位置是在A后面)。伪类选择器动态伪类选择器未访问 （把默认值改为黑色）；a:link{color:black;}鼠标悬停a:hover{color:pink;}鼠标点击时a:active{color:green;}点击后a:visited{color:五颜六色;}；注:hover是可以用于多个元素身上的,但其他三个只能用于具有点击功能的元素上。a:focus{color:颜色;}多用于输入框或链接（注:IE7以前不支持:focus注；IE6以前不支持:hover :active）以上5个的顺序要求: A:link,visited,focus,hover,activeB:visited,link,focus,hover,active结构伪类选择器格式:元素名称+":nth-child(n)"+{声明块} 例:section:nth-child(2){color:deeppink;}表示选中html里的第二个section元素,文字设置为deeppink选中第一个 格式:元素名称+":first-child"+{声明块} 例:p:first-child{color:red;}选中最后一个 格式:元素名称+":last-child"+{声明块} 例:p:last-child{color:red;}选中奇数项 格式:元素名称+":nth-child(odd)"+{声明块} 例:section:nth-child(odd){color:red;}选中偶数项 格式:元素名称+":nth-child(even)"+{声明块} 例:section:nth-child(even){color:red;}伪元素选择器元素后面加内容格式:元素名称+":after"+{content:"要添加的内容";} 例:i:after{content:"姓名";}元素前面加内容格式:元素名称+":before"+{content:"要添加的内容";} 例:i:before{content:"姓名";}元素第一行添加样式格式:元素名称+":first-line"+{声明块} 例:p:first-line{color:red;}元素第一个字母或第一个汉字格式:元素名称+":first-letter"+{声明块} 例:p:first-letter{color:red;}注:为了解决兼容性,伪元素选择器,建议打两个冒号