前提：本周六做了字节笔试题，对其中的css选择器一题不甚了了，所以有了此篇文章
1.一些基础选择器权重
| 标题 | |
|---|---|
| 选择器 | 权重 |
| !importent | >> |
| 内联样式 | 1 0 0 0 |
| id选择器 | 0 1 0 0 |
| 类/伪类/属性选择器 | 0 0 1 0 |
| 元素/伪元素选择器 | 0 0 0 1 |
| 继承/通配 | 0 0 0 0 |
2.属性选择器
<ul>
<li attr="abc">子鼠</li>
<li attr="llabc">丑牛</li>
<li attr="abc oiu">寅虎</li>
<li>卯兔</li>
<p>辰龙</p></p>
<li>午马</li>
<li>亥猪</li></li>
<li>倒数第二</li>
<li>倒数第一</li>
</ul>
2.1 [attr^='abc'] 以abc开头属性元素
[attr^='abc'] {
color: pink;
}
2.2[attr] 所有含有attr属性元素
[attr] {
color: pink;
}
2.3 [attr$='abc']以abc结尾属性元素
[attr$='abc'] {
color: pink;
}
2.4 [attr~='abc']包含abc（abc是整个单词）属性元素
[attr~='abc'] {
color: pink;
}
2.5 [attr*='abc']包含abc（abc可以是某个单词的一部分）属性元素
[attr*='abc'] {
color: pink;
}
3.伪类选择器
<div>
<p>辰龙1</p>
<p>辰龙2</p>
<h1>h1</h1>
<h1>h1</h1>
<h1>h1</h1>
<p>辰龙3</p>
<p>辰龙4</p>
</div>
3.1 nth-child
//div中的第一个孩子（必须写明孩子的类型--‘p’）
div p:nth-child(1) {
color: red;
}
//div中的第三个孩子（必须写明孩子的类型--‘h1’）
div h1:nth-child(3) {
color: red;
}
总结：div(父元素) h1(子元素类型):nth-child(3[第几个])
其中h1必须和3对应
3.2 nth-of-type
父元素内同类型元素,该选择器用于子元素有不同种类型
//div中的第一个 p
div p:nth-child(1) {
color: red;
}
//div中的第一个 p
div p:nth-child(2) {
color: red;
}
//div中的第一个 p
div p:nth-child(3) {
color: red;
}
总结：当括号里面是数字，范围从1开始
当括号里面是表达式，范围从0开始
例如：2n+1(可包括1,3,5,7....) 2n(可包括0,2,4.....)
