html中的高级选择器的类别,css高级选择器

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

信息

二、高级选择器

/*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;

}

标签：color,标签,高级,nth,3n,child,选择器,css

来源： https://www.cnblogs.com/huanghongzheng/p/11116321.html