anchor伪类
<html>
<head>
<style type="text/css">
a:link {color:#FF0000;} /* 未访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */ //必须按照这个顺序！
a:focus{{color:#00FF00;} /* 点击时的伪类 */
</style>
</head>
<body>
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
</body>
</html>
Eg：
<style>
.c1:hover p{ //取出类名为‘ c1’的div中的p标签（子标签）
color:black;
}
</style>
<div class="c1">
<p>
</div>
伪类和CSS类
伪类可以与 CSS 类配合使用：
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>
在一个节点前后加节点
<style>
.c3:after{ content:"333"};
cc3:before{ content:"111"}; //所有添加的都是行内元素！！！！！
</style>
网友评论