CSS 伪类
示例
伪类是允许基于文档树之外或其他选择器或组合器无法表达的信息进行选择的关键字。该信息可以与某个状态（状态和动态伪类），位置（结构和目标伪类），前者的否定（否定伪类）或语言（lang伪类）相关联。示例包括是否跟随链接（:visited），鼠标悬停在元素上（:hover），复选框是否选中（:checked）等。
语法
selector:pseudo-class {
property: value;
}
伪类列表：
| 名称 | 描述 |
|---|---|
| :active | 适用于用户激活（即单击）的任何元素。 |
| :any | 允许您通过创建 包含项将匹配的组来构建相关选择器的集合。这是重复整个选择器的替代方法。 |
| :target | 选择当前活动的#news元素（单击 包含该锚名称的URL ） |
| :checked | 适用于已选中 或切换为“ on”状态的单选，复选框或选项元素。 |
| :default | 表示一组 相似元素中默认的任何用户界面元素。 |
| :disabled | 适用于处于禁用状态的任何UI元素。 |
| :empty | 适用于没有子元素的任何元素。 |
| :enabled | 适用于处于启用状态的任何UI元素。 |
| :first | 与@page规则结合使用，这将选择 打印文档中的第一页。 |
| :first-child | 表示作为其父级的第一个子元素的任何元素。 |
| :first-of-type | 当元素是 其父元素内所选元素类型的第一个元素时适用。这可能是第一个孩子，也可能不是。 |
| :focus | 适用于具有用户焦点的任何元素。这可以通过 用户的键盘，鼠标事件或其他形式的输入来给出。 |
| :focus-within | 当焦点位于其中一个元素时，可用于突出显示整个部分。它与：focus伪类匹配的任何元素或后代集中的元素匹配。 |
| :full-screen | 适用于以全屏模式显示的任何元素。它选择整个 元素堆栈，而不仅仅是顶层元素。 |
| :hover | 适用于用户的指针设备悬停 但未激活的任何元素。 |
| :indeterminate | 应用既未选中也 未选中但处于不确定状态的单选或复选框UI元素。这可能是由于 元素的属性或DOM操作引起的。 |
| :in-range | :in-range当元素 的value属性在此元素的指定范围限制内时，CSS伪类将匹配。 它允许页面反馈当前 使用该元素定义的值在范围限制之内。 |
| :invalid | 适用于<input>根据属性中 指定的类型其值无效的元素type=。 |
| :lang | 适用于包装<body>元素具有正确 指定lang=属性的任何元素。为了使伪类有效，它必须 包含有效的两个或三个字母语言代码。 |
| :last-child | 表示作为其父级的最后一个子元素的任何元素。 |
| :last-of-type | 当元素是 其父元素中所选元素类型的最后一个元素时应用。这可能不是最后一个孩子。 |
| :left | 与@page规则结合使用，这将选择 打印文档中的所有左侧页面。 |
| :link | 适用于用户未访问的任何链接。 |
| :not() | 适用于所有的元素不传递到值相匹配 （或例如，它的值必须是有效的，它只能包含一个选择。但是，您可以链接多个选择在一起。:not(p):not(.class-name) :not |
| :nth-child | 当元素是n其父元素的-th元素时适用，其中n 可以是整数，数学表达式（例如n+3）或关键字 oddor even。 |
| :nth-of-type | 当一个元素是相同元素类型的n父元素的第-th个元素时适用 ，其中n可以是整数，数学 表达式（例如n+3）或关键字oddor even。 |
| :only-child | 在:only-childCSS伪类表示任何元素 是其母公司的唯一的孩子。与 :first-child:last-child或相同:nth-child(1):nth-last-child(1)， 但特异性较低。 |
| :optional | 在:optionalCSS伪类表示任何元素 不具有其上所需要的属性集。这使 表单可以轻松地指示可选字段并相应地设置其样式。 |
| :out-of-range | :out-of-range当元素的 value属性超出此元素的指定范围限制时，CSS伪类将匹配。 它允许页面反馈当前使用该 元素定义的值超出范围限制。如果值 小于或大于最大和最小设置值，则该值可能超出范围。 |
| :placeholder-shown | 实验性的。适用于当前显示占位符文本的任何表单元素。 |
| :read-only | 适用于用户不可编辑的任何元素。 |
| :read-write | 适用于用户可编辑的任何元素，例如<input>元素。 |
| :right | 与@page规则结合使用，这将选择 打印文档中的所有正确页面。 |
| :root | 匹配代表文档的树的根元素。 |
| :scope | CSS伪类匹配 作为选择器要匹配的参考点的元素。 |
| :target | 选择当前活动的#news元素（单击 包含该锚名称的URL ） |
| :visited | 适用于用户已访问的任何链接。 |
该:visited伪类不能在许多现代浏览器可用于大多数的造型了，因为它是一个安全漏洞。请参阅此链接以供参考。
-
主要内容：1、first-child,2、last-child,3、nth-child伪类是 W3C 制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）。 伪类的名称不区分大小写，但需要以冒号 开头。另外，伪类需要与 CSS 中的选择器结合使用，语法格式如下：
-
CSS伪类是用来添加一些选择器的特殊效果。 语法 伪类的语法：selector:pseudo-class {property:value;} CSS类也可以使用伪类：selector.class:pseudo-class {property:value;} anchor伪类 在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示a:link {color:#FF0000;} /* 未访问
-
主要内容：1. ::after,2. ::before,3. ::first-letter,4. ::first-line,5. ::selection,6. ::placeholder伪元素是一个附加在选择器末尾的关键词，通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪元素您可以设置段落中第一个字母的样式，或者在元素之前、之后插入一些内容等等。 在 CSS1 和 CSS2 中，伪元素的使用与伪类相同，都是使一个冒号 与选择器相连。但在 C
-
CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法：selector:pseudo-element {property:value;} CSS类也可以使用伪元素：selector.class:pseudo-element {property:value;} :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 在下面的例子中，浏览器会根据 "
-
我们已经学习过CSS的3种主要的选择器： 通用标签：CSS代码中的 p 用来选择HTML元素 <p>。 类（classes）： CSS代码中的 .intro 用来选择带有属性 class="intro" 的HTML元素。 ids：CSS代码中的 #logo 用来选择带有属性 id="logo" 的HTML元素。 所有这些选择器都可以附加使用伪类（pseudo-classes）。一个伪类用来： 定义
-
本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。 以下是正文。 伪类（伪类选择器） 伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。 静态