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;
}