征服高级CSS选择器(5)

来源：作者：点击:次时间：2009-09-09

你也可以针对相关的p的第一行，而不用针对实际的段落标签(p):

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

或者更进一步，定位某个特低的p的第一个段落的第一行：

p.post > p:first-child::first-line {
font-variant: small-caps;
}

这里，“>”符号表示你指定的是post p的直接子级元素，这样如果段落被包括在第二级p中，它就不会匹配这个选择器。

::first-letter

::first-letter伪元素将会匹配一个文本块的第一个字母，除非在同一行里面包含一些其它元素，比如图片。

和::first-line伪类一样，::first-letter通常用于给文本元素添加排版细节，比如下沉字母或首字母。

这里是如何使用::first-letter伪元素创建首字下沉的例子:

p {
font-size: 12px;
}

p::first-letter {
font-size: 24px;
float: left;
}

注意如果你在某些元素中同时使用::first-line 和::first-letter ，::first-letter 属性将覆盖从::first-line中继承下来的某些属性。

如果你不知道W3C规则的话，这个元素有时会产生意想不到的结果：它事实上是使用最长的规则的选择器！所以如果你计划使用它的话最好仔细的阅读一下 (其它选择器也一样)。

::before 和 ::after

::before和::after 伪元素用于在一个元素的前面或后面插入内容，纯CSS方法。

这些元素将继承它们将附加的元素的大部分属性。

假设你想在你的页面中的图标的描述前面添加文字“Graphic number x:”。你将无需写文字“Graphic number”，或者自己手动添加数字：

.post {
counter-reset: image;
}

p.description::before {
content: "Figure number " counter(image) ": ";
counter-increment: image;
}

那么这会产生什么？

首先，我们告诉HTML来创建“image”计数器。比如我们可以添加该属性到页面的body。同样我们也可以给该计数器起任何一个名字，只要你想，只要我们常常使用同样的名字引用它：自己试试吧！

那么我们想在class为”description”的每一个段落之前添加这一块内容: “Figure number ” — 注意只有我们在引号里面写的内容才会被创建到页面中，所以我们也要添加一个空格！

然后，我们就有了counter(image):这将用到我们之前在.post选择器中定义的属性。它默认会从数字1开始。

下一个属性在那里表示计数器知道对于每一个p.description，它需要将image计数器增加1 (counter-increment: image)。

它并不像看起来的那么复杂，而且还会灰常的有用。

::before和::after伪元素常常只使用content属性，来添加一些短语或排版元素，但是这里我们展示了我们如果以一种更加强大的结合counter-reset和counter-increment属性的方式来使用它们。

有趣的是: ::first-line 和::first-letter 伪元素可以匹配使用::before伪元素生成的内容，如果存在的话。

浏览器支持

如果使用单个冒号的话(比如, :first-letter, 而不是::first-letter)，这些伪元素被IE8支持(但是不被IE7或6支持)。但是左右其他的主流浏览器都支持这些选择器。

结语

乏味的讲述终于结束了，现在该你来领悟本文的要义并自己尝试了: 开始通过创建实验性的页面并测试所有的这些选择器，在有疑问的时候返回这里并确保总是遵循W3C的规则，但是请不要只是坐在那里想这些选择器尚未被完全支持你就无视它们。

如果你敢于冒险，或者你不害怕放弃之前的遍地无用和非语义化的class和id，为什么不尝试一两个这些强大的CSS选择器到你的下一个项目中呢？我们保证你不会回头的！

参考

扩展资源

上一篇：404错误的处理方式及对SEO的影响下一篇：教你一招：一键判断QQ有无木马！