标签：问题 work ice 应用 gre 改进 信息 follow for
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 特殊性
标签：问题 work ice 应用 gre 改进 信息 follow for
原文地址：http://www.cnblogs.com/iceflorence/p/6681371.html
