CSS之伪类

语法

selector:pseudo-class{property-value}

锚伪类

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */
input:focus{border:3px solid #0000FF} /*获得焦点的输入框*/

:first-child伪类

您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解,所以有必要举例来说明。考虑以下标记:

<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

在上面的例子中,作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。

给定以下规则:

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素(在 HTML 中,这肯定是 ol 或 ul 元素)第一个子元素的所有 li 元素变成大写。

:nth-child()

您可以使用 :nth-child(n) 伪类来选择元素的第n个子元素。
规定属于其父元素的第二个子元素的每个 p 的背景色:

p:nth-child(2)
{
background:#ff0000;
}

nth-of-type()

您可以使用 :nth-of-type(n) 伪类来选择元素的第n个某类型的子元素。
规定属于其父元素的第二个 p 元素的每个 p:

p:nth-of-type(2)
{
background:#ff0000;
}
原文地址:https://www.cnblogs.com/Minstrel223/p/12772904.html