二.CSS的伪类

CSS的伪类（Pseudo-classes）分为两种：UI伪类和结构化伪类，伪类通常用于向某些选择器添加特殊的效果，伪类选择符用"  : "进行标示，若是是“ ::  ” 表示CSS3新增伪类

UI伪类

UI伪类会在HTML标签处于某种状态时，应用CSS样式，最常使用UI伪类的标签是a，利用连接伪类，用户能够在鼠标悬停是改变的颜色，去掉文本的下划线或提示信息面板等

咱们先来讨论下连接伪类。连接伪类总共有四个，由于连接始终是如下四种状态之一

• link  等待用户点击
• visited 用户此前点击过
• hover 鼠标悬停状态
• active 连接正在被点击

下面是使用四个伪类选择符的连接a标签

a:link{color:black;}
a:visited{color:green;}
a:hover{text-decoration: none;}
a:active{color: red;}

因为四种状态的特指度相同，上面连接在初始状态时是黑色，点击以后是绿色，悬停时下划线消失，正在点击时显示为红色

须要说明的时候，伪类能够应用任何元素，而不单单是a元素

p:hover{background-color: blue;}

上面代码，可让段落，在悬停时改变背景色为蓝色

 结构化伪类

结构化伪类能够根据标签的结构关系应该样式

e:first-child  表明一组同胞元素中的第一个元素

e:last-child  表明一组同胞元素中的最后一个元素

下面的CSS标记，会将列表的第一行文本设置为红色

ol.results li:first-child{color:red;}

<ol class="results">
    <li>My Fast Pony</li>
    <li>Steady Trotter</li>
    <li>Slow Ol' Nag</li>
    <li>My Fast Pony</li>
    <li>Steady Trotter</li>
    <li>Slow Ol' Nag</li>
</ol>

同理

ol.results li:last-child{color:green;}

将该列表最后一行文本设置为绿色

e:nth-child(n)

这个伪类更加灵活，而不像e:first-child或e:last-child只是用于设置第一个和最后一个元素那么简单，e:nth-child(n)它能够指定同一组中的任何一个元素

像上面那样的样式，咱们可使用e:nth-child(n)完成一样的效果

 ol.results li:nth-child(1){color:red;}

 ol.results li:nth-child(6){color:green;}

数字一、6 表明第一个元素和最后一个元素

ol.results li:nth-child(4){color:yellow;}

上面的CSS将列表的第四项设置为黄色

然而e:nth-child()真正强大之处在于，它能够实现奇偶选择

 ol.results li:nth-child(odd){color:red;}
 ol.results li:nth-child(even){color:green}

这样整个列表的一、三、5项文本被设置为红色，而二、四、6项被设置为绿色

 伪元素

e::first-letter

选择首字母

可使用e::first-letter将段落的首字母字体变大

p::first-letter{font-size: 300%;}

伪元素其实是替咱们添加了无形的标签

e::first-line

选择元素的第一行

例如，使用e::first-line将段落的第一行字体放大

p::first-line{font-size: 300%;}

 e::before和e::after

分别用于在特别元素的前面或后面添加特定内容

下面有一个段落

<p class="demo">This is a demo</p>

CSS样式

 p.demo::before{content: "CSS-Study:"}

效果以下：

上面的全部，须要注意的是搜索引擎，不会取得伪元素的信息，由于它自己就不存在

 下面是伪类总结结构图