css 伪元素（前端入门css伪类和伪元素）
css 伪元素（前端入门css伪类和伪元素）::after例子描述常用的伪元素有这些：选择器例子
伪类（pseudo-class）用于定义元素的特殊状态，伪元素（pseudo-element）用于设置元素指定部分的样式，语法如下：
伪类
selector:pseudo-class {
property: value;
}
伪元素
selector::pseudo-element {
property: value;
}
伪类以“:”单个冒号开头，伪元素以“::”两个冒号开头，注意区分它们的，比较容易混淆。
伪元素选择器常用的伪元素有这些：
|
选择器 |
例子 |
例子描述 |
|
::after |
p::after |
在每个 <p> 元素之后插入内容。 |
|
::before |
p::before |
在每个 <p> 元素之前插入内容。 |
|
::first-letter |
p::first-letter |
选择每个 <p> 元素的首字母。 |
|
::first-line |
p::first-line |
选择每个 <p> 元素的首行。 |
|
::selection |
p::selection |
选择用户选择的元素部分。 |
如下示例：
<HTML>
<head>
<style>
p::before
{
content:"台词：";
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</body>
</html>
效果：
同理:after是在结尾插入字符，::after 和 ::before 常和content属性配合使用，用来出入特殊字符等。
伪元素可以是单冒号，可以是双冒号，较规范使用建议是双冒号。一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
其它的伪元素可以参考：
https://www.w3school.com.cn/css/css_pseudo_elements.asp
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements
伪类按照功能可以分为以下几种：- 锚伪类 —— 作用于链接a标签元素，常用来定义链接的不同状态。
- 表单相关伪类——作用于表单元素，常用来定义表单不同的行为状态。
- 扩展选择型伪类——按照逻辑规则选择元素，比如选择最后一个子元素，偶数或奇数序列的元素等。
- 其它伪类
锚伪类主要用于a链接上，比如鼠标经过链接，点击链接后等状态，使用伪类可以定义不同状态下链接的样式，如下示例：
html：
<a>链接</a>
css：
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
显示效果：
一般按照 :link、:visited、:hover、:active 的顺序(LVHA)使用，其中:hover 会被其它的伪类覆盖，为了确保:hover生效，:hover 需要放在 :link 和 :visited 之后，:active 之前。
:link 伪类，只有当a链接有href属性且是有效的链接，才会起作用，如下示例：
<a href="#" target="_blank">这是一个链接</a>
href属性改成上面这样时，：link不起作用，按理应该显示红色，但却显示绿色。
:hover 伪类可以在任何元素上使用，其用处很多，比如鼠标经过显示隐藏效果。
如下示例：
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
使用:hover 另一个典型的例子就是，制作下拉菜单，不需要使用JavaScript，如下示例：
demo 演示可以看这里：https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3700/3e1094a1c7b42332b9bdef0d0b0c4a7f/css_dropdown_menu.html
除了以上几种链接相关的伪类，还有一个突出显示当前活动的锚链接——:target 伪类。如下示例：
html
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
css
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
效果显示：
此类伪类都是和表单元素有关的，比如下面这些：
|
选择器 |
例子 |
例子描述 |
|
:checked |
input:checked |
选择每个被选中的 <input> 元素。 |
|
:disabled |
input:disabled |
选择每个被禁用的 <input> 元素。 |
|
:enabled |
input:enabled |
选择每个已启用的 <input> 元素。 |
|
:focus |
input:focus |
选择获得焦点的 <input> 元素。 |
|
:in-range |
input:in-range |
选择具有指定范围内的值得 <input> 元素。 |
|
:invalid |
input:invalid |
选择所有具有无效值的 <input> 元素。 |
|
:optional |
input:optional |
选择不带 "required" 属性的 <input> 元素。 |
|
:out-of-range |
input:out-of-range |
选择值在指定范围之外的 <input> 元素。 |
|
:read-only |
input:read-only |
选择指定了 "readonly" 属性的 <input> 元素。 |
|
:read-write |
input:read-write |
选择不带 "readonly" 属性的 <input> 元素。 |
|
:required |
input:required |
选择指定了 "required" 属性的 <input> 元素。 |
|
:valid |
input:valid |
选择所有具有有效值的 <input> 元素。 |
在这里介绍几个常用的，比如:checked，匹配任意被勾选/选中的 radio(单选按钮) Checkbox(复选框) 或者 option(select 中的一项)，如下示例：
html:
<div>
<input type="radio" name="my-input" id="yes">
<label for="yes">Yes</label>
<input type="radio" name="my-input" id="no">
<label for="no">No</label>
</div>
<div>
<input type="checkbox" name="my-checkbox" id="opt-in">
<label for="opt-in">Check me!</label>
</div>
<select name="my-select" id="fruit">
<option value="opt1">Apples</option>
<option value="opt2">Grapes</option>
<option value="opt3">Pears</option>
</select>
css
div
select {
margin: 8px;
}
/* Labels for checked inputs */
input:checked label {
color: red;
}
/* Radio element when checked */
input[type="radio"]:checked {
box-shadow: 0 0 0 3px orange;
}
/* Checkbox element when checked */
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px hotpink;
}
/* Option elements when selected */
option:checked {
box-shadow: 0 0 0 3px lime;
color: red;
}
效果显示：
注意：不同的浏览器通过:checked伪类渲染出来的效果也不尽相同。
再看另一个 :disabled 伪类，匹配禁用的的表单元素，如下示例：
html：
<form action="#">
<fieldset id="shipping">
<legend>非禁用状态</legend>
<input type="text" placeholder="Name">
<input type="text" placeholder="Address">
<input type="text" placeholder="Zip Code">
</fieldset>
<br>
<fieldset id="billing">
<legend>禁用状态</legend>
<input type="text" placeholder="Name" disabled>
<input type="text" placeholder="Address" disabled>
<input type="text" placeholder="Zip Code" disabled>
</fieldset>
</form>
css：
input
{
background:#ffff00;
}
input:disabled
{
background:#dddddd;
}
效果：
如上图，可以看到禁用输入框背景色是灰色。
扩展选择型伪类这类伪类，是用来弥补css选择器的不足，比如如果我想选择当前元素里所有p元素最后一个怎么办？
相关伪类主要有如下这些：
|
选择器 |
例子 |
例子描述 |
|
:first-child |
p:first-child |
选择所有元素下级的第一个 <p> 元素，且必须是第一个子元素。 |
|
:first-of-type |
p:first-of-type |
选择所有元素下级的首个出现的<p> 元素，不必是第一子元素。 |
|
:last-child |
p:last-child |
选择所有元素下级的最后一个<p> 元素，且必须是最后一个子元素。 |
|
:last-of-type |
p:last-of-type |
选择所有元素下级的最后出现的<p> 元素，不必是最后一个子元素。 |
|
:not(selector) |
:not(p) |
选择每个非 <p> 元素的元素。 |
|
:nth-child(n) |
p:nth-child(2) |
选择所有元素下级的第二个<p> 元素，且必须是第二个子元素。 |
|
:nth-last-child(n) |
p:nth-last-child(2) |
选择所有元素下级的倒数第二个<p> 元素，且必须是倒数第二个子元素。 |
|
:nth-last-of-type(n) |
p:nth-last-of-type(2) |
选择所有元素下级的倒数第二个<p> 元素，不必是倒数第二个子元素。 |
|
:nth-of-type(n) |
p:nth-of-type(2) |
选择所有元素下级的第二个<p> 元素，不必是第二个子元素。 |
|
:only-of-type |
p:only-of-type |
代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。 |
|
:only-child |
p:only-child |
匹配没有任何兄弟元素的元素。 |
first-*、last-*开头、nth-*、only-*的伪类，都是指所有元素节点下匹配的元素。
如下示例：
p:first-child 匹配所有节点中第一个子节点是<p>元素的节点。
代码：
<html>
<head>
<style>
p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>
<p>这个段落是其父元素（body）的首个子元素。</p>
<h1>欢迎访问我的主页</h1>
<p>这个段落不是其父元素的首个子元素。</p>
<div>
<p>这个段落是其父元素（div）的首个子元素。</p>
<p>这个段落不是其父元素的首个子元素。</p>
</div>
</body>
</html>
效果：
同理，p:last-child 匹配所有节点中最后一个子节点是<p>元素的节点。
-of-type 结尾的伪类指特定类型的元素，和特定的元素位置无关，比如:first-child 和 :first-of-type的区别就是，前者匹配的元素必须是第一个子元素，后者只要是首次出现的就可以，通俗将就是前者是相对于父级计算位置，后者是相对于同级兄弟节点计算的。
如下示例：
<head>
<style>
p:first-of-type
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<span>文字</span>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
</div>
效果：
如上图，p元素并非第一个子元素，这就是*-of-type伪类的特点。
only-开头的伪类是指唯一性，比如p:only-child 指其父元素下只有一个p元素时，且必须是第一个子元素，only-of-type 的区别就是不必是第一个子元素。
如下示例：
<head>
<style>
p:only-child
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<p>这是一个段落。</p>
</div>
<div>
<span>这是一个 span。</span>
<p>这是一个段落。</p>
</div>
效果：
当给第一个段落同级加上其它元素，你会发现only-child就不起作用了。
这部分伪类，比较晦涩难懂，多加练习，一定要明白这几种直接的区别才行。
其它伪类比如：root、：empty、等，还有其它处在实验阶段的伪类，在这里不一一介绍了。
关于伪类知识，可以参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
https://www.w3school.com.cn/css/css_pseudo_classes.asp
