7. 否定选择器

否定选择器:not()，可以让你定位不匹配该选择器的元素

比如，如果你需要定义表单元素中的input元素，但是又不想包括submit类型的input的时候会灰常有用——你想它们有不同的样式，以看起来像按钮：

input:not([type="submit"]) {
 width: 200px;
 padding: 3px;
 border: 1px solid #000000;
 }

另一个例子，你想你的日志的div中的所有段落(p)有比较大的字体，除了表示时间和日期的段落：

.post p:not(.date) {
 font-size: 13px;
 }

你可以想象这个选择器能带给你的潜力了吧，你能够从你的CSS文件中剥离(剔除)的无用的大量选择器也被它广泛支持吗？

浏览器支持

Internet Explorer在这里常常是让我们感到扫兴的东西：一点都不支持，甚至在IE8中。这大概意味着这些选择器将仍不得不等到一些开发者开始不再顾虑将它添加到他们的样式表中才会普及。

8. 伪元素

伪元素允许你操作HTML中不是真实存在的元素，比如一个文本块的第一行或者第一个字母。

伪元素在CSS 2.1中就已经存在，但是CSS 3说明书表示他们应该使用双冒号“::”，以与伪类区分开来。在CSS 2.1中，他们也是使用单个冒号“:”的。浏览器会将能够接受两种格式，除非这些伪元素只存在于CSS3中。

::first-line

::first-line伪元素将匹配block、inline-block、table-caption、table-cell等等级别元素的第一行

这对在你的文字块上添加一些微妙的排版细节相当有用，比如，将一片文章的第一行文字改成小写字母：

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

如果你专心的阅读了我们前面的内容，你将会了解到上面的语法意味着，紧紧的跟在H1标签之后(+)的段落会将其第一行文字显示为小写字母。

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

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

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

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

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

::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支持)。但是左右其他的主流浏览器都支持这些选择器。

出处：前端观察
责任编辑：bluehearts

上一页 征服高级CSS选择器 [6] 下一页 征服高级CSS选择器 [8]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。