css伪类&伪元素

样式规则通常根据元素在文档结构中的位置应用到元素；但是，级联样式表使用伪类和伪元素的概念，根据位于文档树之外的信息来允许格式设置。伪元素用于处理元素的子部分（例如 :first-letter 或 :first-line），而伪类根据元素名、元素属性或元素内容以外的特征（例如 :first-child、:visited 或 :hover）将元素分类。伪类通常是动态的，这意味着在用户与文档交互的同时元素可以获取或丢失伪类。

伪类

当我们指定某一元素被选中后的特殊状态时,一个 CSS 伪类 会被作为一个关键词添加到选择器上. 例如 :hover 会在当用户鼠标指针悬停在由选择器指定的元素上时应用一个样式.

伪类连同伪元素一起, 他们允许你不仅仅是根据文档DOM树中的内容对元素应用样式,而且还允许你根据诸如像导航历史这样的外部因素来应用样式(:visited, 为例), 同样的,可以根据内容的状态 (例如 在一些表单元素上的 :checked ), 或者鼠标的位置 (例如 :hover 让你知道是否鼠标在一个元素上悬浮)来应用样式.

• :link
• :visited
• :active
• :hover

链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

其中 :hover 不仅限于链接之上，其他元素皆可使用。

• :focus

focus 在一个元素成为焦点时生效，用户可以通过键盘或鼠标激活焦点（例如：一次表单输入）。

.first-name:focus { color: red; }
.last-name:focus { color: lime; }

<input class="first-name" value="input value">
<input class="last-name" value="input value">

• :first-child
• :last-child
• :first-of-type
• :last-of-type

:first-child代表了某个元素，这个元素是它父元素的的第一个子元素.
:first-of-type伪类表示在父容器内其所有种类元素的第一个元素。
:last-child伪类表示其父容器内最后一个子元素。
:last-of-type伪类表示父容器内其所有种类元素的最后一个元素。

span:first-child {
    background-color: lime;
}
ul :last-of-type {
    color: orange;
}

<div>
  <span>This span is limed!</span>
  <span>This span is not. :(</span>
</div>

<ul>
    <li>Lorem ipsum dolor sit amet. <span>Lorem ipsum dolor sit amet.</span> <span>This text will be orange.</span></li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>This text will be orange.</li>
</ul>

效果:

This span is limed! This span is not. :(

最后一个li和最后一个span元素的文本颜色将为橙色。

• :not

:not伪类也被称为反伪类。基本上它接收一个参数，在括号内书写另外一个“选择器”。实际上参数可以是另外一个选择器。

这里可能是链接式的，但是不会包含:not选择器。

下面示例中。:not伪类匹配参数外的元素。

li:not(.first-item) {
    color: orange;
}

<ul>
    <li class="first-item">Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>