征服高级CSS选择器

原文：征服高级CSS选择器
译自：Taming Advanced CSS Selectors

CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、p、span等把我们的HTML搞的很凌乱。

避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额外的class或id，而且通过这种方式也可以让我们的代码和样式更加灵活。

CSS的优先级

在深入研究高级CSS选择器领域之前，理解CSS优先级是如何工作的是很重要的，这样我们就知道如何适当的使用我们的选择器并避免浪费大量的时间来调试一些只要我们注意到优先级的话就很容易被搞定的问题

当我们写CSS的时候我们必须注意有些选择器在级联(cascade)上会高于其它选择器，我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。

那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1, 1, 1, 1 或0, 2, 0, 1

1. 第一个数字(a)通常就是0，除非在标签上使用style属性；
2. 第二个数字(b)是该选择器上的id的数量的总和；
3. 第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
4. 第四个数字(d)计算元素(就像table、p、p等等)和伪元素(就像:first-line等)；
5. 通用选择器(*)是0优先级；
6. 如果两个选择器有同样的优先级，在样式表中后面的那个起作用。

让我们看几个例子，这样或许比较容易理解些：

• #sidebar h2 — 0, 1, 0, 1
• h2.title — 0, 0, 1, 1
• h2 + p — 0, 0, 0, 2
• #sidebar p:first-line — 0, 1, 0, 2

在下面的例子中，第一个将会起作用，因为它比第二个优先级高：

• #sidebar p#first { color: red; } — 0, 2, 0, 1
• #sidebar p:first-line { color: blue; } — 0, 1, 0, 2

至少基本理解优先级是如何工作的是很重要的，但是一些工具比如Firebug，在我们审查指定元素的时候，按照选择器的优先级列出所有的css选择器对让我们知道在指定元素上哪个选择器是有效的是很有用的。

让你非常容易的看到那个选择器作用于一个元素上了。

有用的文章：

• CSS Specificity: Things You Should Know
• Link Specificity¯MeyerWeb CSS: Specificity Wars
•  
• Assigning property values, Cascading, and Inheritance—W3C

1. 属性选择器

属性选择器(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-”开始的p的属性选择器：

p[class|="post"] {
 background-color: #333;
 }

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

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

input[type="text"] {
 width: 200px;
 }

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

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