css高级选择器

标签：text   个数   优先   出现   控制   red   优先级   大于   必须   

1.lable会将当鼠标点在信息位置时，也会将输入定位到input的输入框内

<label for="aaa">信息</label>
<input type="text" id="aaa">

二、高级选择器

/*1、群组选择器：控制多个*/
/*注：每一个选择器位，可以为id、class、标签、选择器组合*/
#h1, .p, .a {
color: red;
}

/*2、后代(子代)选择器：控制一个标签，前方的都是修饰*/
body .div2 .p2 { /*后代 空格，父子(孙)*/
color: orange;
}
.div2 > div > .p2 { /*子代 >，父子*/
color: pink;
}
/*高级选择器通过权重（个数）区别优先级:*/
无限大于：id > class > 标签
种类相同：比个数
个数相同：比顺序
高级选择器种类不影响优先级

/*3、兄弟(相邻)选择器：控制一个标签，前方的都是修饰*/
.p3 ~ .i3 { /*兄弟 ~，可相邻也可不相邻，但必须通过上方修饰下方*/
color: greenyellow;
}
.div3 + .i3 { /*相邻 +，必须相邻，但必须通过上方修饰下方*/
color: green;
}

/*4伪类选择器

/*()内填的是编号，所以从1开始*/
/*1.伪类选择器可以单独出现，相当于省略了统配*/
/*2.:nth-child先匹配层级位置，再匹配标签*/
/*3.:nth-of-type先匹配标签类型，再匹配层级位置*/
i:nth-child(1) {
color: orange;
}
i:nth-child(4) {
color: red;
}

i:nth-of-type(1) {
color: brown;
}
i:nth-of-type(2) {
color: blue;
}

/* 2n偶数 2n-1|2n+1奇数 3n最后一列 3n+1|3n-2第一列 3n-1中间列*/
.pp:nth-child(3n-1) {
color: orange;
}

/*伪类选择器影响优先级，伪类就相当于class*/
.a1.a2 {
color: red;
}
.a1:nth-child(1) {
color: orange;
}

css高级选择器

标签：text   个数   优先   出现   控制   red   优先级   大于   必须   

原文地址：https://www.cnblogs.com/huanghongzheng/p/11116321.html