一. 伪类
伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上。伪类分两种。
汵 UI(User Interface,用户界面)伪类会在 HTML 元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用 CSS 样式。
汵 结构化伪类会在标记中存在某种结构上的关系时(如某个元素是一组元素中的第一个或最后一个),为相应元素应用 CSS 样式。
UI伪类
UI 伪类会基于特定 HTML 元素的状态应用样式。最常使用 UI 伪类的元素是链接(a元素),利用 UI 伪类,链接可以在用户鼠标悬停时改变文本颜色,或者去掉文本的下划线。此外,还可以有其他响应方式,比如悬停时显示一个信息面板,相关内容在我们讨论交互组件的时候再聊。
1. 链接伪类
针对链接的伪类一共有 4 个,因为链接始终会处于如下 4 种状态之一。
◆ Link。此时,链接就在那儿等着用户点击。
◆ Visited。用户此前点击过这个链接。
◆ Hover。鼠标指针正悬停在链接上。
◆ Active。链接正在被点击(鼠标在元素上按下,还没有释放)。
二.以下就是这些状态对应的 4 个伪类选择符(使用了 a 选择符和一些示例声明):
a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}
由于这4 个伪类的特指度(本章后面再讨论特指度)相同,如果不按照这里列出的顺序使用它们,浏览器可能不会显示预期结果。为了好记,我建议大家可以这么想:“LoVe? HA!”大写字母就是每个伪类的头一个字母。
选择符中与众不同的:(冒号)好像在向我们宣示:“我是一个伪类!”
一个冒号(:)表示伪类,两个冒号(::)表示 CSS3 新增的伪元素。
尽管浏览器目前都支持对 CSS 1 和 CSS 2 的伪元素使用一个冒号,但希望你能习惯于用双冒号代替单冒号,因为这些单冒号的伪元素最终可能都会被淘汰掉。更多相关信息,可以
参见这里:http://www.w3.org/TR/2005/WD-css3- selectors-20051215/#pseudo-elements。
根据前面的声明,链接在初始状态时是黑色(默认带下划线)。当鼠标移到上面时(悬停状态),链接的下划线消失,颜色仍然是黑色。当用户在链接上按下鼠标时(活动状态),链接变成红色。而在链接被点击后,也就是鼠标在链接上按下,又在链接上释放后,会触发浏览器打开 URL,此后(或者更准确地说,到浏览器访问历史中的这个 URL 过期或被用户删除之前),链接会一直显示为灰色。
不一定非得把这 4 个状态都写出来。如果你只想定义:link 和:hover 状态,没问题,大多数情况下这也足够了。
但如果你有一个长长的目录链接,那么用稍浅一些的颜色显示出那些已经访问过(即点击过)的链接,对用户会很有帮助。
然而,修改导航条 visited 状态的颜色就没有什么意义了。
我一般就定义一个 a 状态和一个:hover 状态,后者就是为了让用户(在鼠标悬停时)知道相应的元素是不是可以点。
以这种方式为链接的不同的状态添加样式是不错,但要发挥这些链接伪类的真正威力,还是得把它们用到上下文选择符中。这样,就可以让不同区块内的链接具有不同的外观和行为了。比如,稍后我们会看到,通过在上下文选择符中使用链
接伪类,可以轻易地为 nav、footer、aside 和 article 元素中的链接应用不同的外观和行为。
注意,有些伪类可以用于任何元素,而不仅仅是 a 元素。比如,下面这条规则能让段落背景在鼠标悬停时变成灰色:
p:hover {background-color:gray;}
2. :focus 伪类
e:focus
在这个以及后续的例子中,e 表示任何元素,如 p、h1、section,等等。
表单中的文本字段在用户单击它时会获得焦点,然后用户才能在其中输入字符。下面的规则
input:focus {border:1px solid blue;}
会在光标位于 input 字段中时,为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。
3. :target 伪类
e:target
如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以用:target 伪类选中它。
对于下面这个链接
<a href="#more_info">More Information</a>
位于页面其他地方、ID 为 more_info 的那个元素就是目标。该元素可能是这样的:
<h2 id="more_info">This is the information you are looking for.</h2>
那么,如下 CSS 规则
#more_info:target {background:#eee;}
会在用户单击链接转向 ID 为 more_info 的元素时,为该元素添加浅灰色背景。
二.结构化伪类
结构化伪类可以根据标记的结构应用样式,比如根据某元素的父元素或前面的同胞元素是什么。
1.:first-child 和:last-child
e:first-child e:last-child
:first-child 代表一组同胞元素中的第一个元素,而:last-child 则代表最后一个。比如,把下面的规则
ol.results li:first-child {color:blue;}
应用给以下标记:
<ol class="results"> <li>My Fast Pony</li> <li>Steady Trotter</li> <li>Slow Ol' Nag</li>
</ol>
文本“My Fast Pony”就会变成蓝色。如果选择符改成这样:
ol.results li:last-child {color:red;}
那变成红色的文本就是“Slow Ol’ Nag”了。
2.:nth-child
e:nth-child(n)
e 表示元素名,n 表示一个数值(也可以使用 odd 或 even)。
例如,
li:nth-child(3)
会选择一组列表项中的每个第三项。
:nth-child 伪类最常用于提高表格的可读性,比如像第 6 章中那样,对表格的所有行交替应用不同颜色。
还有其他一些结构化伪类,完整的信息请参考这里:http://www.stylinwithcss.com。
三.伪元素
顾名思义,伪元素就是你的文档中若有实无的元素。以下我们介绍几个最有用的伪元素,其他伪元素请参考 http://www.stylinwithcss.com。
1. ::first-letter 伪元素
e::first-letter
比如,以下 CSS 规则:
p::first-letter {font-size:300%;}
可以得到如图 2-18 所示的段落首字符放大的效果。
如果不用伪元素创建这个首字符放大效果,必须手工给该字母加上<span>标签,然后再为该标签应用样式。而伪元素实际上是替我们添加了无形的标签。
2. ::first-line 伪元素
e::first-line
可以选中文本段落(一般情况下是段落)的第一行。例如
3.::before 和::after 伪元素
以下两个伪元素
e::before e::after
可用于在特定元素前面或后面添加特殊内容。
以下标记
<p class="age">25</p>
和如下样式
p.age::before {content:"Age: ";} p.age::after {content:" years.";}
注意,每个 content 属性值中都包含了空格,以便输出结果中有适当的空距。
能得到以下结果:
Age: 25 years.
1
2
3
4
5
6
7
如果标签中的内容是通过数据库查询生成的结果,那么用这种技巧再合适不过了。因为所有结果都是数字,使用这两个伪元素可以在把数字呈现给用户时,加上说明性文字。
这个例子展示了对::before 和::after 伪元素很基本又很实用的应用。后面我还会给
大家展示这两个伪元素的其他用法,比如在应用它们的元素外面附着一个动态的新元素,从而得到一种有趣的布局效果。
搜索引擎不会取得伪元素的信息(因为它在标记中并不存在)。因此,不要通过伪元素添加你想让搜索引擎索引的重要内容。
好啦,到现在为止,我们已经把各种 CSS 选择符都介绍完了。接下来,需要更进一步,探讨一下 CSS 的工作原理。
在一个较大的样式表中,可能会有很多条规则都选择同一个元素的同一个属性。比如,一个带有类属性的段落,可能会被一条以标签名作选择符的规则选中并指定一种字体,而另一条以该段落的类名作选择符的规则却会给它指定另一种字体。我们知道,字体属性在任意时刻都只能应用一种设定,那此时该应用哪种字体呢?为解决类似的冲突,确定哪条规则“胜出”并最终被应用,CSS 提供了三种机制:继承、层叠和特指。接下来的三节,就分别讨论这三种机制。