伪类选择器

css属性选择器

如果想选择class属性中包含warning的元素，可以用一个属性选择器做到这一点：p[class~=“warning”]{font-weight:bold;}如果忽略了这个波浪号，则需要完全值匹配。

HTML要有这种属性主要用来其他属性，而不只是class。img[title~=“figure”]{border:1px solid gray;}这个规则会选择titile文本中包含figure的所有图像。

其他的子串匹配属性选择器。[foo^=“bar”]选择foo属性值以bar开头的所有元素，[foo$=“bar”]选择foo属性值以bar结尾的所有元素，[foo*=“bar”]选择foo属性值中包含子串bar的所有元素。

这个选择器有许多用途，举例来说，假设你希望对指向‘123.com’网站的所有链接应用特殊的样式，不必为所有这些链接指定类，再根据这个类编写样式，只需编写以下规则：a[href*=“123.com”}{font-weight:bold;}当然，并不只限于class和href属性，在此任何属性都可用。

 

伪类选择器

我们来考虑锚元素(a),在html和xhtml中，锚元素会建立一个文档到另一个文档的链接。要想区别哪些链接已经访问过，唯一的方法就是将文档中得链接与用户的浏览历史相比较。所以，实际上有两种基本的锚类型：已访问的和未访问的。这些类型称为伪类，使用这些伪类的选择器则称为伪类选择器。

css定义了伪类，使已访问页面的锚就好像已经有一个visited类一样。

现在，指向已访问页面的锚都会是红色，甚至你不必为任何锚增加class属性。注意规则中的冒号：。分隔a和visited的冒号是伪类或伪元素的”名片“。所有伪类和伪元素关键字前面都有一个冒号。

静态伪类

:link指示作为超链接并指向一个未访问地址的所有锚。:visited指示作为已访问地址超链接的所有锚。

动态伪类

:focus指示当前拥有焦点的元素，也就是说，可以接受键盘输入或者能以某种方式激活的元素。

:hover指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上，:hover就会指示这个超链接

:active指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，:active将指示这个超链接。

 

伪类的顺序很重要，通常的建议是LVFHA，link-visited-focus-hover-active。

动态伪类可以应用到任何元素，这一点很好，因为对非链接的元素应用动态样式通常很有用。

还可以使用另一个静态伪类：first-child来选择元素的第一个子元素。这个特定伪类很容易遭到误解：最常见的错误是认为p:first-child之类的选择器会选择p元素的第一个子元素。不过，要记住伪类的实质，它是把某种幻想类关联到与伪类相关的元素。如果要向标记增加具体类。class=“first-child”,因此，如果想选择作为某元素第一个子元素的em元素，应当写作em:first-child。这种选择器才能真正的达到你的目的，例如，对列表中的第一项、div中得第一段或表行中得第一个td应用样式。

 

根据语言选择

有些情况下，你可能根据元素的语言来选择，此时可以使用：lang()伪类。从对应的模式来讲，:lang()伪类就像是|=属性选择器。例如，要将所有法语元素变成斜体，可以写作：*:lang(fr){font-style:italic;}伪选择器和属性选择器之间的主要差别在于语言信息可以从很多来源得到，而且其中一些可能在元素之外。

结合伪类

还可以为另一种语言的未访问和已访问链接指定不同的悬停样式，例如可以如下指定德语元素的样式：a:link:hover:lang(de){color:gray}，要当心，不要把互斥的伪类结合在一起使用。例如，一个链接不能同时是已访问和未访问的，所以a:link:visited没有任何意义。用户代理往往会忽略这种选择器，相应地忽略整个规则，不过，不同的浏览器可能会有不同的错误处理行为。