css/选择器

第二层

　　　　　　第二层

　　　　　　A+B{} 表示选择A标签后面相邻的兄弟标签B

　　选择器 : div + div { border: 1px  solid  red }

7、兄弟选择器

　　写法: A~B{ }  表示选择器A标签后面 的兄弟标签B，A标签与B标签可以不相邻

　　选择器 : .box1 ~ .box3 { border: 1px  solid  red }

8、属性选择器　　

　　通过标签的属性 来选择标签

　　属性选择器本身 与 类选择器权重相同

　　（1）[属性名称]

　　　　 [class] {color: red}

　　　　 div[class] {color: red}

　　（2）[属性名称=“属性值”]

　　　　 [class="box"] {color: red}

　　　　 div[class="box"] {color: red}

8、伪类选择器　　

　　选择器上带:号的 特征大部分的就是伪类选择器，伪类选择器 是专门选择一些状态特征内容

　　A:hover{ color:red }  表示鼠标移入到A标签上的时候 选择A标签设置样式为字体 颜色红色

　　div:hover{color: green}

9、css3选择器

　　（1）first-child、last-child

　　　　　 A:first-child表示选择标签里面 位置为第一的子标签A

　　　　　 B:last-child表示选择标签里面 位置为最后一个子标签B

　　　　　　  div span:first-child{color: red}　　 //选择第一个标签

　　　　　　 div span:last-child{color: green}　　//选择最后一个标签

　　（2）nth-child( )

　　　　　　选择奇数位置或偶数位置的标签；从1开始

　　　　　　div span:nth-child(1){color: blue}　　//选择第一个span标签

　　　　　　div span:nth-child(3n+1){color: blue}　　//选择第1、4、7...个span标签

　　　　　　div span:nth-child(odd){color: red}　　 // 选择奇数的span标签

　　　　　　div span:nth-child(even){color: green}　　// 选择偶数的span标签

　　（3）first-of-type、last-of-type

　　　　　　A:first-of-type{ }  表示选择标签里面  类型为第一个的子标签A

　　　　　　　A:last-of-type{ }  表示选择标签里面  类型为子标签A的 最后一个标签

　　　　　　　div p:first-of -type{color: red}

　　　　　　  div p:last-of -type{color: green}

　　（4）nth-of-type( )

　　　　 div  p:nth-of-type(2) {color: red}

　　（5）not( )

　　　　排除某一类的选择器

　　　　111　// 红色　　　

222

　　　　333　　　// 红色　

444

　　　　not([p]){color: red}

10、伪元素
　　
文本1

　　div:before{
　　　　content: "前文本";
　　　　color: red
　　}

　　div:after{
　　　　content: "后文本";
　　　　color: red
　　}
　　伪元素使用hover

　　div:hover:after{　　// 鼠标移入div上，after标签文本边绿色
　　　　content: "后文本";
　　　　color: green
　　}

选择器的权重比较：默认样式 标签名称选择器 类选择器 id选择器 style属性样式

css/选择器

标签：col   red   eve   ora   family   ping   strong   color   before   

原文地址：https://www.cnblogs.com/cuishuangshuang/p/12622600.html