# 伪类 Pseudo-classes
CSS伪类是用来添加一些选择器的特殊效果。
伪类的语法： selector:pseudo-class {property:value;}
# anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
# :first-child 伪类
使用 :first-child 伪类来选择父元素的第一个子元素。
p:first-child
{
color:blue;
}
# 常用伪类/伪元素
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 指定属于其父元素的最后一个子元素的 p 元素的背景色 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not(p) | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素是不是p元素，是的话就执行代码，否则忽略 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个p 元素的第一个字母 |
| :first-line | p:first-line | 选择每个p 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 p 元素 |
| :lang(language) | p:lang(it) | 为p元素的lang属性选择一个开始值 |
:where() CSS 伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。
/* Selects any paragraph inside a header, main
or footer element that is being hovered */
:where(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
:is() CSS 伪类函数以选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
/* 三层或更深的无序列表使用方形符号。 */
ol ol ul,
ol ul ul,
ol menu ul,
ol dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
list-style-type: square;
}
===>优化后
/* 三层或更深的无序列表使用方形符号。 */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
list-style-type: square;
}
# 伪元素
# :first-line 伪元素
用于向文本的首行设置特殊样式
# :first-letter 伪元素
用于向文本的首字母设置特殊样式
# :before 伪元素
可以在元素的内容前面插入新内容
# :after 伪元素
在元素的内容之后插入新内容
# 标准伪元素
::after (:after)
::backdrop
::before (:before)
::cue (:cue)
::first-letter (:first-letter)
::first-line (:first-line)
::grammar-error
::marker
::placeholder
::selection
::slotted()
::spelling-error
# 伪元素的好处
它可以简化页面的HTML标签，同时用起来方便。一般用于画图，分割线，点之类的小元素。
伪元素是一个元素的子元素，并且是inline行内元素。 无法用js获取到或者增删改一个伪元素,可以在视觉上制造效果,又不会增加JS查DOM的负担,不是一个实际的HTML标签，可以加快浏览器加载HTML文件,对SEO也是有利的.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
p{
text-align: center;
}
p:before,p:after{
content:"";
height:1px;
width:100px;
background:green;
top:24px;
position:absolute
}
p:before{
left:0
}
p:after{
background:blue;
right:0
}
</style>
</head>
<body>
<p>123</p>
</body>
</html>
<script type="text/javascript">
</script>
伪类伪元素单双引号
CSS3中的要求使用双冒号(::)表示伪元素，来区分伪元素和伪类，为兼容过去的写法，CSS3之前的伪元素仍然可以使用单冒号(:)来表示，浏览器可解析。但是之后出现的伪元素必须用双冒号表示，不再支持单冒号的形式。