目录
- 1. 什么是伪类和伪元素？
- 1.1 伪类
- 1.2 伪元素
- 2. 伪类和伪元素的使用场景？
- 2.1 伪类的应用
- 2.1.1 在 a 标签中的应用
- 2.1.2 表单验证
- 2.1.3 元素索引
- 2.2 伪元素的应用
- 2.2.1 使用 :after 清除浮动
- 2.2.2 插入文本内容
- 2.2.3 插入非文本内容
- 3. CSS3中的伪类和伪元素
- 3.1 CSS3中的伪类
- 3.2 CSS3中的伪元素
前言： 最近在项目练习中使用了很多伪类和以及伪元素，但是对这些知识只有一知半解的理解，下面就来整理一下相关知识，以便后面再使用的时候能够得心应手。
1. 什么是伪类和伪元素？
1.1 伪类
CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态，在不同的状态下，有不同的样式。伪类更多的定义的是状态，常见的伪类如下表：
属性 | 描述 |
:active | 向被激活的元素添加样式。 |
:focus | 向拥有键盘输入焦点的元素添加样式。 |
:hover | 当鼠标悬浮在元素上方时，向元素添加样式。 |
:link | 向未被访问的链接添加样式。 |
:visited | 向已被访问的链接添加样式。 |
:first-child | 向元素的第一个子元素添加样式。 |
:last-child | 向元素的最后一个子元素添加样式。 |
:nth-child(n) | 向元素的第n个子元素添加样式。 |
:required | 指定具有 required属性 的表单元素。 |
:valid | 指定一个 匹配指定要求 的表单元素。 |
:invalid | 指定一个 不匹配指定要求 的表单元素。 |
1.2 伪元素
CSS 伪元素用于向某些选择器设置特殊效果，常见的伪元素有以下几个：
属性 | 描述 |
:first-letter | 向文本的第一个字母添加特殊样式。 |
:first-line | 向文本的首行添加特殊样式。 |
:before | 在元素之前添加内容。 |
:after | 在元素之后添加内容。 |
需要注意的是： 在CSS3中明确规定伪元素前面用两个冒号(::)来表示，而伪类用一个冒号来表示(:)，但是由于浏览器兼容的问题，它们都用一个冒号(:)来表示，所以比较容易混淆。
2. 伪类和伪元素的使用场景？
2.1 伪类的应用
伪类选择器可以分为两种：静态伪类和动态伪类。
- 静态伪类，只能用于超链接样式，例如：
:link ，:visited - 动态伪类，针对所有标签都使用的样式，例如：
:hover，:hover，:focus
2.1.1 在 a 标签中的应用
<a>标签有四种状态：:link，:hover，:active，:visited
/* 超链接点击之前*/
a:link{
color:green;
}
/* 超链接被被访问之后 */
a:visited{
color:orange;
}
/* 鼠标放在标签上时 */
a:hover{
color:red;
}
/* 鼠标点击超链接，但是没松手时 */
a:active{
color:skyblue;
}
需要注意： 这四个属性必须按照以上顺序写，不然设置的样式不会生效！
还有一个小问题，就是<a>标签本身定义的属性和a:link定义的属性有什么区别呢？
-
a{} 定义的样式对所有的<a>标签生效 -
a:link 定义的样式只对有href属性的<a>标签生效
实际使用中，我们使用 a:link较少，因为a{}设置的样式也能到达同样的效果。
2.1.2 表单验证
在表单验证中，我们常会用到一下三个属性：
选择器 | 描述 |
:required | 指定具有 required属性 的表单元素 |
:valid | 指定一个 匹配指定要求 的表单元素 |
:invalid | 指定一个 不匹配指定要求 的表单元素 |
（1）:required 选择器在表单元素是必填项时设置指定样式。表单元素可以使用 required 属性来设置必填项。该选择器只适用于以下表单元素：input，select 和 textarea。
（2）:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。
（3）:invalid 选择器用于在表单元素中的值是非法时设置指定样式。
注意： :valid选择器和:invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。
看下面的例子，对input框的email类型进行校验：
<input type="email" placeholder="请输入" value="123456@qq.com" />
<input type="email" placeholder="请输入" value="hello world" />
<input type="email" placeholder="请输入" value="" required />
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
input:required {
border-color: pink;
}
显示结果：
2.1.3 元素索引
对于制定一系列相同的标签时，我们不需要使用JavaScript去获取，可以使用下面的属性获取：
选择器 | 描述 |
:first-child | 向元素的第一个子元素添加样式。 |
:last-child | 向元素的最后一个子元素添加样式。 |
:nth-child(n) | 向元素的第n个子元素添加样式。 |
:nth-of-type(n) | 向元素同类型中的第n个同级兄弟元素添加元素。 |
注意： 上面的选择器中的n，既可以是数字，也可以是关键字，或者一个公式。
示例：
<div>
<h2>标题</h2>
<p>第一段文字</p>
<p>第二段文字</p>
<p>第三段文字</p>
<p>第四段文字</p>
<p>第五段文字</p>
</div>
<style>
p:nth-child(3){
color: blue;
}
p:nth-of-type(3){
color: pink;
}
p:last-child{
color: red;
}
p:first-child{
color: green;
}
从上面的运行结果我们可以看到，:nth-child(n)和 :nth-of-type(n) 所表示的内容是不一样的，:nth-child(n)不关注元素的类型，只关注是父元素下的第n个子元素，而 :nth-of-type(n)会关注元素的类型，设置的样式只对第n个同类的兄弟元素有效。
同样我们可以看到我们使用:first-child设置的样式没有生效，原因是p标签父元素的第一个子元素不是p标签，所以没有生效。这也说明了:first-child、:last-child 和:nth-child(n)一样，不关注元素的类型。
2.2 伪元素的应用
在使用的伪元素的时候我们需要注意以下几点：
- 伪元素在使用时必须设置content属性，不然是无效的
- 在伪元素插入的内容，只能在CSS中看到
- 在伪类中插入的元素通常情况下是内联元素，通常需要转化为块级元素再进行设置
- 伪元素不会继承父元素的样式
- 伪元素被应用为元素的子元素
:before和:after是我们常用的两个伪元素：
伪元素 | 描述 |
:before | 在元素之前添加内容，使用 content 属性来指定要插入的内容。 |
:after | 在元素之后添加内容，使用 content 属性来指定要插入的内容。 |
2.2.1 使用 :after 清除浮动
使用 :after 清除浮动是目前使用的比较多的方法，它的形式如下：
<style>
.container{
border:1px solid #ccc;
background:pink;
margin:50px ;
padding:50px;
}
.container:after {
content:'';
clear:both;
display:block;
height:0;
width:0;
}
.div1{
width: 100px;
height:100px;
background:red;
float:left;
}
.div2{
width: 100px;
height:100px;
background:blue;
float:left;
}
.div3{
width: 100px;
height:100px;
background:skyblue;
float:left;
}
<div class="container">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
如果我们不清除浮动，那父元素就会发送塌陷。
在不清除浮动之前，三个块是这样的：
清除浮动之后：
2.2.2 插入文本内容
<style>
p:before{
content: "题目: ";
}
<body>
<p>这是一段文字</p>
</body>
</style>
显示结果：
2.2.3 插入非文本内容
<style>
p:before{
content: "";
display: block;
width: 30px;
height: 30px;
background:url(icon.jpg) no-repeat;
background-size:100%;
}
</style>
<body>
<p>图标</p>
</body>
3. CSS3中的伪类和伪元素
3.1 CSS3中的伪类
动态伪类：
伪类 | 描述 |
:link | 选择所有未被访问的链接。 |
:visited | 选择所有已被访问的链接。 |
:active | 选择活动链接。 |
:hover | 选择鼠标指针位于其上的链接。 |
:focus | 选择获得焦点的 input 元素。 |
状态伪类：
伪类 | 描述 |
:enabled | 选择每个启用的元素。 |
:disabled | 选择每个禁用的元素。 |
:checked | 选择每个被选中的元素。 |
:nth选择器：
伪类 | 示例 | 描述 |
:first-of-type | p:first-of-type | 选择属于其父元素的首个 |
:last-of-type | p:last-of-type | 选择属于其父元素的最后 |
:only-of-type | p:only-of-type | 选择属于其父元素唯一的 |
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 |
:nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 |
:last-child | p:last-child | 选择属于其父元素最后一个子元素每个 |
:empty | p:empty | 选择没有子元素的每个 |
:not(selector) | :not§ | 选择非 |
:root | :root | 选择文档的根元素。 |
3.2 CSS3中的伪元素
伪元素 | 描述 |
::after | 已选中元素的最后一个子元素 |
::before | 已选中元素的第一个子元素 |
::first-letter | 选中某个款级元素的第一行的第一个字母 |
::first-line | 匹配某个块级元素的第一行 |
::selection | 匹配用户划词时的高亮部分 |
