选择器

1.类型选择器

有时也称元素选择器或简单选择器

P {color:black;}

h1 {font-weight:bold;}

2.后代选择器   

由其他两个选择器之间的空格表示

h1 em 选择器     可以解释为 “作为 h1 元素后代的任何 em 元素”。

3.ID选择器和类选择器   

ID:#    类：.

4.通用选择器

*           对页面上所有元素应用样式

与其他选择器结合可以用来对某个元素的所有后代应用样式或者越过一级后代

1. 子选择器

用符号“>”表示。它允许你定位某个元素的第一级子元素。

比如，如果你想匹配所有的作为你的网站侧栏的div的子元素的h2元素，而不是可能是在div元素内的所有h2元素，也不是div的孙元素（或者更低级别的），你就可以使用下面的选择器：

div#sidebar > h2 {font-size： 20px;}

你当然也可以同时使用子元素和后代元素。比如，如果你想定位只有在body元素的子级div元素内的blockquote元素（比如你想匹配主要的div内的blockquotes，而不是其它部分的：

body > div > div blockquote {margin-left： 30px;}

浏览器支持

和属性选择器一样，子选择器不被IE6支持。如果你通过这种方式要实现的效果和网站的可用性或总体设计息息相关，你可以考虑使用一个class，或者使用只针对IE6的样式，但是这将有悖使用子选择器的目的。

2. 属性选择器

属性选择器（Attribute selector）让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性——而不管它的值——的这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展示它们的威力的地方。

有6个不同类型的属性选择器：

［att=value］

该属性有指定的确切的值。

［att~=value］

该属性的值必须是一系列用空格隔开的多个值，（比如，class=”title featured home”），而且这些值中的一个必须是指定的值”value”。

［att|=value］

属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。（比如lang=”zh-cn”）

［att^=value］

该属性的值以指定值开始。

［att$=value］

该属性的值包含指定的值（而无论其位置）。

［att*=value］

该属性的值以指定的值结束

比如，如果你想要改变你的博客上的日志部分元素的背景颜色，你可以使用一个指定每一个class属性值以“post-”开始的div的属性选择器：

div［class|=“post”］ {background-color： #333;}

该语句将匹配所有class属性包含”post”并带”-”字符的div元素。（注：此处英文原文有些上下文不对应，我已经更正——译者，神飞）

属性选择器的另一个很有用的用处是定位不同类型的input元素。比如，如果你想让你的文本输入框使用一个特定的宽度，你可以使用下面的属性选择器：

input［type=“text”］ {width： 200px;}

这将匹配所有type属性值等于“text”的input元素。

现在我们可能像为网站上不同的文件类型的链接添加不同的图标，这样你的网站的访客就会知道他们将获得一个图片、或者PDF文件、或者是一个word文档等。这就可以使用属性选择器来实现：

a［href*=“.jpg”］ {background： url（jpeg.gif） no-repeat left 50%;padding： 2px 0 2px 20px;}a［href*=“.pdf”］ {background： url（pdf.gif） no-repeat left 50%;padding： 2px 0 2px 20px;}a［href*=“.doc”］ {background： url（word.gif） no-repeat left 50%;padding： 2px 0 2px 20px;}

在此例中，我们使用了一个定位所有的链接（a）的href属性分别以.jpg，.pdf或.doc结束（*）的属性选择器。详细可查看前端观察之前的一篇文章《使用CSS选择器创建个性化链接样式》

浏览器支持

除了Internet Explorer 6，所有的主流浏览器都支持属性选择器。这意味着，如果你在你的网站上使用了属性选择器，你应该确保IE6用户将仍能获得一个可用的网站。比如我们的第三个例子，为链接添加图标可以给你的网站带来另一个级别的可用性，但是如果这些链接不显示任何图标，该网站仍然还是可用的。

3. 兄弟组合

有两类兄弟组合：临近兄弟组合和普通兄弟组合

临近兄弟组合

该选择器使用加号“+”来链接前后两个选择器。选择器中的元素有同一个父亲，而且第二个必须紧紧的跟着第一个。

临近兄弟组合可以灰常有用，比如，在处理文字的时候。比如我们想对段落后面的h2标题添加一个顶间距“margin-top”（当然或许你无需为h1标签后面的h2添加，或者它可能是页面的第一个元素）：

p + h2 {margin-top： 10px;}

你甚至可以更加具体，你想定位某个特定的div后面的h2：

div.post p + h2 {margin-top： 10px;}

或者你可以搞得更加复杂：页面的第一个段落的第一行字母显示为小写字母。

.post h1 + p:first-line {font-variant： small-caps;}

因为可能大部分日志/文章的第一个段落都会紧紧的在H1标签的后面。你可以在你的选择器中借助于h1标签。

普通兄弟组合

普通兄弟组合和临近兄弟组合的工作原理很像，不同的是第二个选择其无需紧紧跟随第一个。

如果你需要定位所有的某个特定的div里面并且跟在h1标签后面的p标签的话（你可能想要这些p标签比拟的日志的标题前面的文字大些），你就可以使用这个选择器：

.post h1 ~ p {

font-size： 13px;

}

浏览器支持

Internet Explorer 6依然不能理解兄弟选择器，但是，另一种情况，如果你的用户中只有一小部分是IE6用户，而且网站的结构不会被破坏或者受到严重影响，这是实现很多很酷的效果而无需在你的HTML代码中添加无用的class或id。

伪类

1.动态伪类

:link   :visited    称为链接伪类，只能用于锚元素  

:link伪类用于链接尚未被用户访问的时候，而:visited 伪类用于用户访问过的链接，也就是说它们是相反的。        

:hover  :active   :focus     用户行为

:hover伪类用于用户移动他们的鼠标在元素上，而尚未触发或点击它的时候。:active伪类应用于用户点击元素的情况。最后，:focus伪类用于元素成为焦点的时候——最常用于表单元素。

IE6只注意应用于锚链接的:avtive和:hover选择器，忽略focus，IE7任何元素都能用:hover，忽略:active和:focus。

2.  :first-child

：first-child伪类允许你定位某个元素第一个子元素。比如，如果你想给你的无序列表的第一个li添加一个margin-top，你就可以这样写：

ul > li:first-child {

margin-top： 10px;

}

让我们来看一看另一个例子：比如你想让你的博客的侧栏的H2标签都有个顶部边距，以将标题和它们前面的内容区分开来，但是第一个h2不需要， 你就可以使用下面的代码：

#sidebar > h2 {

margin-top： 10px;

}

#sidebar > h2:first-child {

margin-top： 0;

}

浏览器兼容性

IE6 不支持 ：first-child 伪类。根据伪类应用到的设计的不同，它或许不会成为关注的主要问题。比如，如果你使用：first-child 选择器 来移除标题或段落上的头部或底部的间距，你的布局在IE6中不会坏掉，它只会看起来有些不同。但是如果你使用：first-child选择器从一个， 比如浮动元素，移除左边距或右边距，将会让你的设计乱掉。

3.语言伪类

lang（），允许你匹配一个基于它的语言的元素。

你如，你想让你的网站的某个特定的链接根据页面的语言有不同的背景颜色：

：lang（en） > a#flag {

background-image： url（english.gif）;

}

：lang（fr） > a#flag {

background-image： url（french.gif）;

}

这个选择器将会匹配相关的链接——如果页面的语言等于“en”或“fr”，或者以“en”或“fr”开头并在后面带个连字符“-”的话。

浏览器兼容性

不幸的是，只有IE浏览器中只有IE8支持该选择器，其它的主要浏览器都支持该伪类选择器。

4. CSS 3 伪类

:target

当你使用锚点（片段标识符 fragment identifier）的时候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus- ninety-years-of-inspiration/#comments，这“#comments”就是一个片段标识符，你就可以使用:target伪类来控制目标的样式。

举个例子，比如你有一个很长的使用了很多文字和h2标题的页面，然后在页面的头部有一个对这些标题的索引。如果在点击索引内的 某个链接时，相应的标题以某种方式高亮，然后滚动到相应的位置，对读者就会很有用。很简单。

h2:target {background： #F2EBD6;}

浏览器兼容性

这一次，IE浏览器完全不支持：target伪类，另一个小问题就是Opera 在使用“前进”和后退按钮时不支持该选择器。 但是其它的各个主流浏览器都支持该选择器。

UI元素状态伪类

有些HTML元素有enable 或disabled 状态（比如，文本输入框）和 checked 或unchecked 状态（单选按钮和复选框）。 这些状态就可以使用：enabled、：disabled 或：checked 伪类来分别定位。

那么你就会想，如果任意一个禁用的（disabled）文本框应该使用浅灰色的背景和虚线边框：

input:disabled {border:1px dotted #999;background：#F2F2F2;}

你也可能会想让所有选中的复选框有个左边距（这样就可以在众多的复选框中很容易认出来）：

input［type=”checkbox”］：checked {margin-left： 15px;}

浏览器兼容性

所有的主流浏览器，除了我们常常不报希望的IE系列浏览器，都支持UI元素状态伪类。如果你考虑只是添加附加级别的细节和增强网站的可用性 ，这个仍然是可以采用的。

5. CSS 3 结构伪类

：nth-child

：nth-child（）伪类允许你定位某个父级元素的一个或多个特定的子元素。

你可以通过定义它的值为一个整数来定位某个单个子元素：

ul li:nth-child（3） {color： red;}

这将会让ul元素的第三个li元素的文字变成红色。注意如果在ul里面有个其它类型的元素（不是li），它也会算作其子元素。

你可以使用表达式来定位子元素。比如，下面的表达式将从第四个开始匹配每第三个元素。

ul li:nth-child（3n+4） {color： yellow;}

优先级

第一个数字（a）通常就是0，除非在标签上使用style属性；

第二个数字（b）是该选择器上的id的数量的总和；

第三个数字（c）是用在该选择器上的其它属性选择器和伪类的总和。这里包括class （.example） 和属性选择器（比如 li［id=red］）；

第四个数字（d）计算元素（就像table、p、div等等）和伪元素（就像：first-line等）；

通用选择器（*）是0优先级；

如果两个选择器有同样的优先级，在样式表中后面的那个起作用。

选择器