css高级选择器

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;
}

 /5*a标签的4大伪类（link,hover,active,visited）

<style>
/*链接的初始状态*/
a:link {
color: deepskyblue;
}
/*链接的悬浮状态*/
a:hover {
/*cursor: wait;*/
/*cursor: col-resize;*/
cursor: pointer;
color: blue;
}
/*链接的激活状态*/
a:active {
color: deeppink;
}

/**链接的已访问状态*/
a:visited {
color: yellow;
}

文本的伪类

body {
/*文本不能选择*/
user-select: none;
}
/*普通标签都可以去使用 :hover :active */
.btn {
width: 80px;
height: 38px;
background-color: cornflowerblue;

border-radius: 5px;
text-align: center;
line-height: 38px;
color: white;
}
.btn:hover {
cursor: pointer;
background-color: deepskyblue;
}
.btn:active {
background-color: blue;
}

/6*文本样式

.div {
/*字体大小: 最小12px，还需要更小就更换字体库*/
font-size: 30px;

/*字体库(字族)：字体, 备用1, ..., 备用n*/
/*font-family: "STSong", "微软雅黑";*/

/*字重: 100~900 bold normal lighter*/
font-weight: lighter;

/*字体颜色*/
color: tomato;

/*水平位置: left center right*/
text-align: center;

/*行高(垂直位置)：默认文本在所在行高中垂直居中，要实现文本的垂直居中，让行高 = 容器高*/
line-height: 200px;

/*文本划线: underline line-through overline none*/
text-decoration: underline;
}