CSS学习杂记——选择器

有效且结构良好的文档为我们要应用的样式提供了一个框架。要想使用CSS将样式应用于特定的HTML元素，需要想办法找到这个元素。在CSS中，执行这一任务的样式规则部分称为选择器（selector）。

1、常用的选择器

最常用的选择器类型是类型选择器和后代选择器。类型选择器用来寻找特定类型的元素，比如段落或标题元素，只需指定希望应用样式的元素名称。类型选择器有时候也称为元素选择器或简单选择器。

eg：

p {color:black;}

h1{font-weight:bold;}

后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其他两个选择器之间的空格表示。在下面的示例中，只缩进是块引用的后代的段落元素，其他段落不受影响。

eg：

blockquote p {padding-left:2em;}

这两种选择器适合于应用那些应用范围广的一般性样式。

要想寻找更特定的元素，可以使用ID选择器和类选择器。顾名思义，这两种选择器用于寻找那些具有指定ID或类名的元素。ID选择器由一个#字符表示，类选择器有一个点号.表示。下面的示例中的第一条规则简介段落中的文本以粗体显示，第二条规则让日期显示为绿色：

#intro {font-weight: bold;}

.date-posted {color:#ccc;}

<p id="intro">Happy Birthday Andy</p>

<p class="date-posted">24/3/2009</p>

我们知道很多CSS开发人员过度依赖类选择器和ID选择器。如果他们希望以一种方式对主内容区域中的标题应用样式，而在第二个内容区域中采用另一种方式，那么他们很可能创建两个类并且每个标题上应用一个类。一种简单得多的方法是结合使用类型、后代、ID和类这几种选择器：

#main-content h2 {font-size: 1.8em;}

#secondary-content h2 {font-size: 1.2em;}

<div id="main-content">

<h2>Articles</h2>

...

</div>

<div id="secondary-content">

<h2>Latest news</h2>

...

</div>

这是一个非常简单明朗的示例，只使用前面讨论的4种选择器就可以成功找到许多元素。如果你发现自己的文档中添加了许多不必要的类，那么这可能是文档结构不合理的一个警告信号。这时候应该分析这些元素之间的差异。你常常会发现唯一的差异是它们在页面上出现的位置。不要给这些元素指定不同的类，而应将一个类或ID应用于它们的祖先，然后使用后代选择器定位它们。

伪类

有时候，我们需要根据文档结构之外的其他条件对元素应用样式，例如表单元素或链接的状态。这要使用伪类选择器来完成。

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。伪类的名称不区分大小写。

此外还有:focus，其他用法示例如下：

/*focus is added for keyboard support */

a:focus {color:red;}

/makes table rows red when hovered over*/

tr:hover {background-color:red;}

/*makes input elements yellow when focus is applied*/

input:focus {background-color:yellow;}

:link和:visited称为链接伪类，只能应用于锚元素(a元素)。:hover、:active和:focus称为动态伪类，理论上可以应用于任何元素。大多数浏览器都支持这个功能。

最后，值得指出的是：通过把伪类连接在一起，可以创建更复杂的行为，比如在已访问链接和未访问链接上实现不同的鼠标悬停效果。

/*makes all visited links olive on hover(盘旋，悬停)*/

a:visited:hover {color:olive;}

伪类可以与 CSS 类配合使用，如果下面的例子的链接已被访问，它会显示为红色。：
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>

所有CSS伪类/元素

选择器示例示例说明:checkedinput:checked选择所有选中的表单元素:disabledinput:disabled选择所有禁用的表单元素:emptyp:empty选择所有没有子元素的p元素:enabledinput:enabled选择所有启用的表单元素:first-of-typep:first-of-type选择每个父元素是p元素的第一个p子元素:in-rangeinput:in-range选择元素指定范围内的值:invalidinput:invalid选择所有无效的元素:last-childp:last-child选择所有p元素的最后一个子元素:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素:not(selector):not(p)选择所有p以外的元素:nth-child(n)p:nth-child(2)选择所有p元素的第二个子元素:nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素:nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素:only-childp:only-child选择所有仅有一个子元素的p元素:optionalinput:optional选择没有"required"的元素属性:out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性:read-onlyinput:read-only选择只读属性的元素属性:read-writeinput:read-write选择没有只读属性的元素属性:requiredinput:required选择有"required"属性指定的元素属性:rootroot选择文档的根元素:target#news:target选择当前活动#news元素(点击URL包含锚的名字):validinput:valid选择所有有效值的属性:linka:link选择所有未访问链接:visiteda:visited选择所有访问过的链接:activea:active选择正在活动链接:hovera:hover把鼠标放在链接上的状态:focusinput:focus选择元素输入后具有焦点:first-letterp:first-letter选择每个<p> 元素的第一个字母:first-linep:first-line选择每个<p> 元素的第一行:first-childp:first-child选择器匹配属于任意元素的第一个子元素的 <]p> 元素:beforep:before在每个<p>元素之前插入内容:afterp:after在每个<p>元素之后插入内容:lang(language)p:lang(it)为<p>元素的lang属性选择一个开始值

2.通用选择器

通用选择器可能是所有选择其中最强大却最少使用的。通用选择器的作用就像是通配符，它匹配所有可用元素。与其他语言的通配符一样，通用选择器由一个星号表示。通用选择器一般用来对页面上所有元素应用格式。例如，可以用以下规则删除每个元素上默认的浏览器内边距和外边距：

* {

padding:0;

margin:0;

}

在与其他选择器结合使用时，通用选择器可以用来对某个元素的所有后代应用样式，或者跳过一级后代。

3.高级选择器

CSS 2.1和CSS 3有其他许多有用的选择器。不过，虽然大多数现代浏览器支持这些高级选择器，但是IE6和更低版本不支持。但是在创建CSS时考虑到了向后兼容性，如果浏览器不理解某个选择器，那么它会忽略整个规则。因此，可以在现代浏览器中应用样式和易用性方面的改进，同时不必担心它在老是浏览器中造成问题。但是要记住，在对于站点功能或布局很重要的任何元素上，都应该避免使用这些高级选择器。

3.1子选择器和相邻同胞选择器

第一个高级选择器是子选择器。后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。在下面的示例中，外层列表中的列表显示一个定制的图标，而嵌套列表中的列表不受影响。

IE7he更高的版本都支持子选择器。但是在IE7中有一个小bug，如果父元素和子元素之间有HTML注释，就会出问题。

在IE6和更低版本中，可以使用通用选择器模拟子选择器的效果。为此，先在所有后代上应用你希望的子元素具有的样式。然后，使用通用选择器覆盖子元素的后代上的样式。所以，要实现与前面子选择器示例相同的效果，可以这样做：

有时，我们可能需要根据一个元素与另一个元素的相邻关系对它应用样式。相邻同胞选择器可以用于定位同一个父元素下的某个元素之后的元素。可以使用相邻同胞选择器让顶级标题后面的第一个段落显示为粗体、灰色，并且字号比后续段落略微大一点：

与子选择器一样，如果在目标元素之间有注释，这在IE7中也会有出问题。

3.2属性选择器

顾名思义，属性选择器可以根据某个属性是否存在或属性的值来寻找元素，因此能够实现某些非常有意思和强大的效果。

例如，当鼠标悬停在具有title属性的元素上时，大多数浏览器会显示一个工具提示。可以使用这种特性解释某些内容（比如首字母缩拼词和缩写词）的含义：

<!DOCTYPE HTML>
<html>
<body>


The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.


</body>
</html>

其表现结果为：当鼠标移动至PRC时，会显示“People's Republic of China”的提示。如下图：

但是如果不把鼠标悬停在这个元素上，那么没有任何迹象能够表明存在这一额外信息。为了解决这个问题，可以使用属性选择器对具有title属性的abbr元素应用与其他元素不同的样式——在下面的示例中，在它们下面加点，还可以在鼠标悬停在这个元素上时将鼠标指针改为问号，表示这个元素与众不同，从而提供更多的上下文相关信息。

abbr[title]{/*<abbr> 标签指示简称或缩写*/
border-bottom:1px dotted #999;
}
abbr[title]:hover,abbr[title]:focus{
cursor:help; /*cursor属性规定要显示的光标的形状*/
}

效果如下图：

除了根据某个属性是否存在对元素应用样式之外，还可以根据属性值应用样式。例如，使用rel属性值nofollow链接的站点无法从Google获得评级收益（ranking benefit）。以下规则在这种链接旁边显示一个图像，以此表示不推荐这个目标站点：

a[rel="nofollow"] {

background: url(nofollow.gif) no-repeat right center;

padding-right: 20px;

}

一些属性可以有多个值，值之间用空格分隔。属性选择器允许根据属性值之一寻找元素。例如，XFN微格式允许在锚链接的rel属性中添加关键字来定义你与站点的关系。假设某个站点属于我的同事，我就可以在博客上的链接中添加co-worker关键字来表示这一关系。然后可以在这为同事的姓名旁边显示一个特殊的图标，以此标明我和这个人一起工作：

.blogroll a[rel~="co-worker"]{ /* 用于 <a> 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系，而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 <a> 标签中同时使用。*/
background:url(co-worker.gif) no-repeat left center;
}

<ul class="blogroll">
<li>
<a href="http://adaction.com" rel="friend met colleague co-worker">
Jeremy Keith</a>
</li>
<li>
<a href="http://hichsdesign.com" rel="friend met colleague">
John Hicks</a>
</li>
<li>
<a href="http://stuffandnonsense.co.uk" rel="friend met colleague">
Richard Rutter</a>
</li>
</ul>

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}