📅 最后修改于: 2020-10-26 04:50:42 🧑 作者: Mango
CSS伪类用于向某些选择器添加特殊效果。您无需使用JavaScript或任何其他脚本即可使用这些效果。伪类的简单语法如下-
selector:pseudo-class {property: value}
CSS类也可以与伪类一起使用-
selector.class:pseudo-class {property: value}
最常用的伪类如下-
| Sr.No. | Value & Description |
|---|---|
| 1 |
:link Use this class to add special style to an unvisited link. |
| 2 |
:visited Use this class to add special style to a visited link. |
| 3 |
:hover Use this class to add special style to an element when you mouse over it. |
| 4 |
:active Use this class to add special style to an active element. |
| 5 |
:focus Use this class to add special style to an element while the element has focus. |
| 6 |
:first-child Use this class to add special style to an element that is the first child of some other element. |
| 7 |
:lang Use this class to specify a language to use in a specified element. |
它将产生以下黑色链接-
下面的示例演示了如何使用：visited类设置访问链接的颜色。可能的值可以是任何有效格式的任何颜色名称。
这将产生以下链接。单击此链接后，它将颜色更改为绿色。
以下示例演示了当将鼠标指针移到链接上方时，如何使用：hover类更改链接的颜色。可能的值可以是任何有效格式的任何颜色名称。
它将产生以下链接。现在，将鼠标移到该链接上，您将看到它的颜色变为黄色。
以下示例演示如何使用：active类更改活动链接的颜色。可能的值可以是任何有效格式的任何颜色名称。
它将产生以下链接。当用户单击它时，颜色变为粉红色。
下面的示例演示如何使用：focus类更改焦点链接的颜色。可能的值可以是任何有效格式的任何颜色名称。
它将产生以下链接。当此链接成为焦点时，其颜色变为橙色。失去焦点时，颜色会变回原样。
：first-child伪类与指定元素匹配，该指定元素是另一个元素的第一个子元素，并向该元素（另一个元素的第一个子元素）添加特殊样式。
要使：first-child在IE <！DOCTYPE>中工作，必须在文档顶部声明。
例如，要缩进所有
First paragraph in div. This paragraph will be indented
Second paragraph in div. This paragraph will not be indented
But it will not match the paragraph in this HTML:
Heading
The first paragraph inside the div. This paragraph will not be effected.
它将产生以下结果-
语言伪类：lang允许根据特定标记的语言设置构造选择器。
此类在必须吸引多种语言的文档中很有用，这些语言对于某些语言结构具有不同的约定。例如，法语通常使用尖括号（<和>）进行引用，而英语则使用引号（’和’）。
在需要解决此差异的文档中，可以使用：lang伪类来适当地更改引号。以下代码针对所使用的语言适当地更改了
标签-...
A quote in a paragraph...：lang选择器将应用于文档中的所有元素。但是，并非所有元素都使用quotes属性，因此大多数元素的效果是透明的。
它将产生以下结果-