CSS 伪类选择器
伪类的语法:
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
CSS - 锚伪类
链接的不同状态都可以以不同的方式显示。
a:link {color: #000000; } /* 未访问的链接 */
a:visited {color: red; } /* 已访问的链接 */
a:hover {color: yellow; } /* 鼠标移动到链接上 */
a:active {color: blue; } /* 选定的链接 */
注:a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。 a:active 必须被置于 a:hover 之后,才是有效的。
CSS - 伪类和CSS类
a.yellow : hover {color: yellow; }
<a class="yellow" href="https://www.pangugle.com/">pangugle 教程</a>
以上实例表示当鼠标移到 <a> 元素上面时,元素字体颜色为黄色。
CSS - :first-child 伪类
样式作用于父元素的第一个子元素。
以下实例表示 css 作用于父元素里面第一个子元素 <p>:
p:first-child{ color:red; }
<div>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
</div>
以下实例表示 css 作用于父元素里面第一个 <p> 的 <a>:
p:first-child a{ color:red; }
<div>
<p><a href="https://www.pangugle.com/">pangugle 教程</a></p>
<p><a href="https://www.pangugle.com/">这个没有样式</a></p>
</div>
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
div:before
{
content: "♥";
color: #FF0000;
}
CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
div:after
{
content: "♥";
color: #FF0000;
}