一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第28天，点击查看活动详情。
最近项目中有一些手写样式的地方，我发现居然有很多css的知识忘记了，关于选择器这部分现在再重新总结回忆一下吧！
css2中基础选择器
-
元素类型选择器
直接将标签作为选择器，如直接使用
div、ul、li、h1~h6、body、p、a等标签名。 -
id选择器
#使用元素的id属性做选择器，如
<div id='app'></div>，css中#app{/** ..样式 */} -
class选择器
.使用元素是class属性做选择器，如
<div class='list'></div>，css中.list{/** ..样式 */}
css3中的选择器
css3中的选择器可以分为两大类，属性选择器和伪类选择器，伪类选择器有分多种：
- 属性选择器
- 伪类选择器
- 结构性伪类
- 目标伪类
- UI元素伪类
- 语言伪类
- 否定伪类
- 动态伪类
- 层级选择器
1、属性选择器
-
标签[属性]{/** ..样式 */}：匹配有改属性的标签元素，不管这个属性的值是什么。示例：
a[href]{color: red}。解释：找到所有带href属性的a标签设置样式。 -
标签[属性 = ‘属性值’]{/** ..样式 */}：匹配属性等于特定值的元素。示例：
input[type="checkbox"]{background: '#fff'}。找到所有的checkbox框设置背景颜色。 -
标签[attr^ = 'value']{/** ..样式 */}：匹配attr属性的属性值以value开头的标签元素 -
标签[attr$ = 'value']{/** ..样式 */}：匹配attr属性的属性值以value为结尾的标签元素 -
标签[attr* = 'value']{/** ..样式 */}：匹配attr属性的属性值中包含value的标签元素
2、为元素(伪对象)选择器
-
标签::frist-line伪元素选择器用于某个元素的第一行的文字设置样式。
示例：
p:frist-line{font-wight: 600}将p标签中文字的第一行加粗。 -
标签::frist-letter伪元素选择器用于某标签中首个文字或字母的样式修改。
-
标签::before在标签前插入一些内容，设置样式。
-
标签::after在标签后插入什么内容并设置样式
这里提一下伪元素和伪类的的区别：
通过一个示例看一下这个区别：
<div>
<p >111</p>
<i >222</i>
<i >333</i>
<p >pp44</p>
</div>
<div>
<p >一一</p>
<i >二二</i>
<i >三三</i>
<p >pp44</p>
</div>
css样式：
/** 伪元素 */
div::before{color: green; content: 'before';}
p::first-letter{color: red}
/** 伪类 */
div:first-child{border: 2px solid #a00;}
p:first-child{background: #faa}
结果：
总结一下伪类和伪元素的区别：
- 伪元素语法上是双冒号
::，伪类是单冒号 - 伪元素是要具体到某一个或某一类标签，比如示例中的所有div前面都要加'before'字符串，或者是所有p的第一个字符变成红色。我们着重关心的是这个div或者是p标签。
- 伪类是不用指定具体标签中的内容，比如上面示例中，我们只需要在有p标签的同级元素列表中设置第一个p标签的样式，而不关心这个列表在哪里，列表中都有什么元素，这个列表的父元素是什么。伪类着重关心的是这个标签是否满足条件。
3、结构性伪类选择器
| 选择器 | 示例 | 解释 |
|---|---|---|
:first-child | li:first-child{ color:yellow; } | 选择父元素的子元素列表中第一个子元素是<li> 的每个<li>元素。（需要满足子元素列表的第一个必须是li才能设置上样式） |
:last-child | p:last-child | 选择其父元素中最后一个子元素是<p> 的每个<p>元素 |
:nth-child(n) | .list:nth-child(3){color: blue} | 选择父元素的子元素列表中，class名为list的元素列表中的第3个class名为list的元素并设置样式 |
:nth-last-child(n) | p:nth-last-child(2){样式} | 选择元素列表中倒数第2个p标签 |
:first-of-type | p:first-of-type | 选择父元素的子列表中的第一个<p>标签。（不限制整个子元素列表的第一个是什么，只需要找到列表中的第一个p） |
:last-of-type | p:last-of-type | 选择父元素的子列表中最后一个<p>标签。 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素 |
:only-of-type | p:only-of-type | 选择属于其父元素唯一的<p> 元素的每个<p> 元素。 |
:only-child | p:only-child | 选择属于其父元素的唯一子元素是<p>的每个<p>元素 |
:empty | p:empty | 选择没有子元素的每个 <p>元素（包括文本节点）。 |
:not(标签) | :not(p) | 选择非 <p> 元素的每个元素。 |
