1,常用选择器:元素(标签/简单)选择器、ID选择器、类选择器、后代选择器(可以将类或者ID应用于它们的祖先,然后使用后代选择器来定位)
2,伪类:有时候,我们需要根据文档结构之外的其他条件对元素应用样式,例如表单元素或链接的状态,可以使用伪类选择器来完成:
/*makes all unvisited links blue*/
a:link { color: blue; }
/*makes all visited links green*/
a:visited { color: green; }
/*makes links red when hovered or actived. focus is added for keyboard support*/
a:hover, a:focus, a:active { 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成为链接伪类,只能应用于锚元素。:hover、:active和:focus称为动态伪类,理论上可以应用于任何元素,大多数浏览器都支持这个功能。但是IE6只注意应用于锚链接的:active和:hover选择器,完全忽略:focus。IE7在任何元素上都支持:hover,但是忽略:active和:focus。如果不需要兼容IE6、IE7,就很好啦。
最后,值得指出的是,通过把伪类链接在一起,可以创建更复杂的行为,比如在已访问链接和未访问链接上实现不同的鼠标悬停效果。
/*makes all visited links olive on hover*/
a:visited:hover { color: olive; }
通用选择器:最强大但最少用,在与其他选择器结合使用时,通用选择器可以用来对某个元素的所有后代应用样式,或者跳过一级后代。
3,高级选择器:
CSS2.1和CSS3有其他许多有用的选择器。不过,虽然现代大多数浏览器支持这些高级选择器,但是IE6或更低版本不支持。好在在创建CSS时考虑到了向后兼容性。如果浏览器不理解某个选择器,那么它会忽略整个规则。因此,可以在现代浏览器中应用样式和易用性方面的改进。同时不必担心它在老式浏览器中造成问题。但是要记住,在对于站点功能或布局很重要的任何元素上,都应该避免使用这些高级浏览器。
3.1 子选择器和相邻同胞选择器
IE7和更高版本都支持子选择器。但是IE7中有一个小bug,如果父元素和子元素之间有HTM注释,就会出问题。
在IE6和更低版本中,可以使用通用选择器模拟子选择器的效果。为此,先在所有后代上应用你希望子元素具有的样式,然后,使用通用选择器覆盖子元素的后代上的样式。请看下面的例子:
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Service</a>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Consultancy</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
#nav li {
background: url(folder.png) no-repeat left top;
padding-left: 20px;
}
#nav li * {
background-image: none;
padding-left: 0;
}
#nav > li {
background: url(folder.png) no-repeat left top;
padding-left: 20px;
}
上面2中CSS的写法,效果是一样的。
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。与子选择器一样,如果在目标元素之间有注释,这在IE7中也会出现问题。
3.2 属性选择器
属性选择器可以根据某个属性是否存在或属性的值来寻找元素,因此能够实现某些非常有意思和强大的效果。
例如,当鼠标悬停在具有title属性的元素上时,大多数浏览器会显示一个工具提示。可以使用这种特性来解释某些内容(比如首字母缩拼词和缩写词)的含义:
<p>The term<acronym title="self-contained underwater breathing apparatus">SCUBA</acronym> is an acronym rather than an abbreviation as it is pronounced as
a word
</p>
acronym[title] {
border-bottom: 1px dotted #999;
}
acronym[title]:hover,
acronym[title]:focus {
cursor: help;
}
除了根据某个属性是否存在对元素应用样式之外,还可以根据属性值应用样式。例如,使用rel属性值nofollow链接的站点无法从Google获得评级收益(ranking benefit)。以下规则在这种链接旁边显示一个图像,以此表示不推荐这个站点:
a[rel='nofollow'] {
background: url(nofollow.gif) no-repeat right center;
padding-right: 20px;
}
包括IE7的现代浏览器都支持这些选择器,然而,由于IE6不支持属性选择器,可以利用它对IE6应用一种样式,对更符合标准的浏览器应用另一种样式。例如,AndyClarke利用这种技术为IE6提供网站的黑白版本,为其他浏览器提供彩色版本。
#header {
background: url(branding-bw.png) repeat-y left top;
}
[id='header'] {
background: url(branding-color.png) repeat-y left top;
}
一些属性可以有多个值,值之间用空格分隔。属性选择器允许根据属性值之一寻找元素。例如,XFN微格式允许在锚链接的rel属性中添加关键字来定义你与站点的关系。假设某个站点属于我的同事,我就可以在博客上的链接中添加co-worker关键字来表示这一关系。然后可以在这位同事的姓名旁边显示一个特殊的图标,以此表明我和这个人一起工作。
.blogroll a[rel~="co-worker"] {
color: #fff;
background: blue;
}
<ul class="blogroll">
<li><a href="http:adactio.com/" rel="friend met colleague co-worker">Jeremy Keith</a></li>
</ul>
3.3 层叠和特殊性
CSS层叠(cascade)的重要度次序如下:
a,标有!important的用户样式
b,标有!important的作者样式
c,作者样式
d,用户样式
e,浏览器/用户代理应用的样式
具有更加特殊性选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。(可以通过将任何规则指定为!important来提高它的重要度,让它优先于任何规则,甚至优先于作者加上的!important标志的规则。)
3.3.1 特殊性