伪类和伪元素

wzCoding大约 8 分钟

伪类和伪元素

伪类和 伪元素 这一类选择器的数量众多，通常用于很明确的目的。

伪类

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

伪类就是 开头为冒号的关键字，例如：:hover

下面以列表的形式列举了一些常见的伪类。

`:active`

在用户激活（例如点击）元素的时候匹配

`:any-link`

匹配一个链接的 :link 和 :visited 状态

`:blank`

匹配空输入值的 <input> 元素

`:checked`

匹配处于选中状态的单选或者复选框

`:current`

匹配正在展示的元素，或者其上级元素

`:default`

匹配一组相似的元素中默认的一个或者更多的 UI 元素

`:dir`

基于其方向性（HTMLdir属性或者 CSSdirection属性的值）匹配一个元素

`:disabled`

匹配处于关闭状态的用户界面元素

`:empty`

匹配除了可能存在的空格外，没有子元素的元素

`:enabled`

匹配处于开启状态的用户界面元素

`:first`

匹配分页媒体的第一页

`:first-child`

匹配兄弟元素中的第一个元素

`:first-of-type`

匹配兄弟元素中第一个某种类型的元素

`:focus`

当一个元素有焦点的时候匹配

`:focus-visible`

当元素有焦点，且焦点对用户可见的时候匹配

`:focus-within`

匹配有焦点的元素，以及子代元素有焦点的元素

`:future`

匹配当前元素之后的元素

`:hover`

当用户悬浮到一个元素之上的时候匹配

`:indeterminate`

匹配未定态值的 UI 元素，通常为复选框

`:in-range`

用一个区间匹配元素，当值处于区间之内时匹配

`:invalid`

匹配诸如 <input> 的位于不可用状态的元素

`:lang`

基于语言（HTMLlang属性的值）匹配元素

`:last-child`

匹配兄弟元素中最末的那个元素

`:last-of-type`

匹配兄弟元素中最后一个某种类型的元素

`:left`

在分页媒体中，匹配左手边的页

`:link`

匹配未曾访问的链接

`:local-link`

匹配指向和当前文档同一网站页面的链接

`:is()`

匹配传入的选择器列表中的任何选择器

`:not`

匹配作为值传入自身的选择器未匹配的物件

`:nth-child`

匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等即所有的奇数个）

`:nth-of-type`

匹配某种类型的一列兄弟元素（比如 <p> 元素）——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等即所有的奇数个）

`:nth-last-child`

匹配一列兄弟元素，从后往前倒数兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类从后往前数的所有奇数个）

`:nth-last-of-type`

匹配某种类型的一列兄弟元素（比如 <p> 元素），从后往前倒数兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类从后往前数的所有奇数个）

`:only-child`

匹配没有兄弟元素的元素

`:only-of-type`

匹配兄弟元素中某类型仅有的元素

`:optional`

匹配不是必填的 <form> 元素

`:out-of-range`

按区间匹配元素，当值不在区间内的的时候匹配

`:past`

匹配当前元素之前的元素

`:placeholder-shown`

匹配显示占位文字的 <input> 元素

`:playing`

匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素

`:paused`

匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素

`:read-only`

匹配用户不可更改的元素

`:read-write`

匹配用户可更改的元素

`:required`

匹配必填的 <form> 元素

`:right`

在分页媒体中，匹配右手边的页

`:root`

匹配文档的根元素

`:scope`

匹配任何为参考点元素的的元素

`:valid`

匹配诸如 <input> 元素的处于可用状态的元素

`:target`

匹配当前 URL 目标的元素（例如如果它有一个匹配当前URL 分段的元素）

`:visited`

匹配已访问链接

由于伪类的数量较多，我们将以一个简单的例子来展示如何使用伪类

代码示例

<div class='content'>
   <h1 id='title'>Hello World!</h1>
</div>

div.content{
    /** 选择 class 为 content 的 div 元素，设置背景色  */
    background-color:yellow;
}
div.content:hover{
    /** 选择 class 为 content 的 div 元素，当用户悬浮到该元素上时，改变背景色 */
    background-color:blue;
}
div.content:hover #title{
    /** 选择 class 为 content 的 div 元素，当用户悬浮到该元素上时，设置 id 为 title 的子元素的字体颜色 */
    color:red;
}

伪元素

伪元素 以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。

伪元素就是 开头为双冒号的关键字，例如：::before

下面以列表的形式列举了一些常见的伪元素。

代码示例

<h1 id='title'>Hello World!</h1>

#title::before,
#title::after{
    /** 选择 id 为 title 的元素，在它的伪元素 ::before 和 ::after 上面设置边框样式  */
    content:''; /** content 作为伪元素 ::before 和 ::after 的属性时，不能省略 */
    display:inline-block;
    width:2px;
    height:16px;
    border:1px solid #000;
}

伪类和伪元素

# 伪类和伪元素

# 伪类

# 伪元素

伪类和伪元素

伪类

伪元素