| 选择符语法 | 描述 |
|---|---|
| E [att] | 匹配具有att属性的所有元素 |
| E [att = "value"] | 匹配具有att属性且值为value的元素 |
| E [att ^= "value"] | 模糊匹配，以属性值为value打头的元素 |
| E [value $= "value"] | 模糊查询，以属性值为value结尾的元素 |
| E [value *= "value"] | 完全模糊匹配 |
这里一共分为两个大类
| 选择符语法 | 描述 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
这个比上面的属性选择器稍微复杂一点，但是也很easy，这个我直接上代码或许更加简单明了一点
样式部分为：
<style>
/* :first-child为第一个元素 */
ul :first-child {
background-color: blue;
}
?
/* 有了第一个当然就会有最后一个 */
ul :last-child {
background-color: pink;
}
?
/* 指定匹配上的的元素中的某一个，下标从1开始 */
ul :nth-child(5) {
background-color: black;
}
?
/* 这个就是有意思的地方了，这个值可以是数字，如上般那样，也可以是公事，还可以是关键字 */
?
/* even为偶数行 还可以选择odd，为奇数行 */
ul li:nth-child(even) {
background-color: orangered;
}
/* 这个为公式，n是从0开始，到匹配上的所有元素的个数为尾，递增+1，下面的意思就是选择前五个，因为我们的元素总共就10个 */
ul :nth-child(-n + 5) {
background-color: orange;
}
?
div {
height: 100px;
background-color: rgb(204, 204, 204);
}
?
/* 这个可以匹配父元素其下的第一个子元素,即使他不是span */
div :nth-child(1) {
background-color: orangered;
}
?
/* 这个只能匹配父元素下是span元素的第一个子元素 */
div span:nth-of-type(1) {
background-color: red;
}
</style>
body部分为
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div>
<p>小伙子，你不要拽</p>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
这里就有一个比较
nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nt-of-type 选择指定类型的元素
| 选择符语法 | 描述 |
|---|---|
| ::before | 在元素的内部的前面插入内容 |
| ::after | 在袁术的内部的后面插入内容 |
需要注意的就是:
两个选择器都要求必须有content属性
before和after创建的是一个行内元素，如需设置高宽等属性，需要转换为行内快
创建出来的元素在Dom中找不到的，所以称为伪元素，也不晓得是个啥？
......有错误望指正
原文：https://www.cnblogs.com/chenchaoliang/p/12398444.html
