CSS伪类是用来添加一些选择器的特殊效果。伪类的简单语法如下-
selector:pseudo-class {property: value}
CSS类也可以与伪类一起使用-
selector.class:pseudo-class {property: value}
最常用的伪类如下-
| Sr.No. | Value & Remark |
|---|---|
| 1 |
:link a:link 选择所有未访问链接 |
| 2 |
:visited a:visited 选择所有访问过的链接 |
| 3 |
:hover a:hover 把鼠标放在链接上的状态 |
| 4 |
:active a:active 选择正在活动链接 |
| 5 |
:focus input:focus 选择元素输入后具有焦点 |
| 6 |
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| 7 |
:lang p:lang(it) 为<p>元素的lang属性选择一个开始值 |
:link 伪类
选择所有未访问链接，下面的示例演示如何使用:link 类设置链接颜色。
<html>
<head>
<style type="text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href="">Black Link</a>
</body>
</html>
它将产生以下黑色链接-
:visited伪类
选择所有访问过的链接，下面的示例演示了如何使用:visited 类设置访问链接的颜色。
<html>
<head>
<style type="text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href="">Click this link</a>
</body>
</html>
这将产生以下链接。单击此链接后，它将颜色更改为绿色。
:hover 伪类
把鼠标放在链接上的状态，下面的示例演示将鼠标指针移到链接上时，如何使用:hover 类更改链接的颜色。
<html>
<head>
<style type="text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href="">Bring Mouse Here</a>
</body>
</html>
它将产生以下链接。现在，将鼠标移到该链接上，您将看到它的颜色变为黄色。
:active伪类
选择正在活动链接，下面的示例演示如何使用:active 类更改活动链接的颜色。
<html>
<head>
<style type="text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href="">Click This Link</a>
</body>
</html>
它将产生以下链接。当用户单击它时，颜色变为粉红色。
:focus伪类
选择元素输入后具有焦点，下面的示例演示如何使用:focus 类更改焦点链接的颜色。
<html>
<head>
<style type="text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href="">Click this Link</a>
</body>
</html>
它将产生以下链接。当此链接成为焦点时，其颜色变为橙色。失去焦点时，颜色会变回原样。
:first-child 伪类
:first-child 伪类，要使:first-child在IE <!DOCTYPE>中工作，必须在文档顶部声明。
例如，要缩进所有<div>元素的第一段，可以使用此定义-
<html>
<head>
<style type="text/css">
div > p:first-child {
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</html>
它将产生以下输出-
:lang 伪类
以下代码针对所使用的语言适当地更改了<blockquote>标签-
<html>
<head>
<style type="text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang="fr">A quote in a paragraph</q>...</p>
</body>
</html>
:lang 选择器将应用于文档中的所有元素。但是，并非所有元素都使用quotes属性，因此大多数元素的效果是透明的。
它将产生以下输出-
参考链接
https://www.learnfk.com/css/css-pseudo-classes.html
标签：lang,伪类,无涯,paragraph,link,链接,CSS,first From： https://blog.51cto.com/u_14033984/9385674