发现CSS3选择器的强大功能

  • 知识需要:初学者到中级HTML和CSS
  • 需要:文本编辑器,浏览器
  • 项目时间: 3小时
  • 下载源文件

本文首次出现在.net杂志的第216期 - 这是世界上最畅销的网页设计师和开发者杂志。

要使用CSS设置元素样式,我们需要能够定位它。输入CSS选择器,这使我们能够在更精细的级别上定位元素,而无需添加表示性标记或属性。

这意味着您的标记可以超薄,语义和灵活。这里没有空间来覆盖所有CSS3选择器,所以我们将专注于属性和子串选择器,然后是结构和否定伪类。

有了一系列选择器,很难知道使用哪种类型的选择器。随着新的CSS3选择器的推出,我们将为他们提供真实的用例,以便他们立即在您的项目中使用。

属性和子字符串选择器

CSS3扩展了我们可以使用的属性选择器列表,方法是在我们的工具箱中添加三个新的子串选择器。这意味着我们现在可以定位规则并根据属性值的一部分将CSS样式应用于元素。我们将简要介绍下面的每一个。

“以”子串选择器开头

当与子串选择器相关时,插入符号(^)运算符表示“以...开头”。例如,通过添加指示外部链接的小图标,可以将其用于定位内容中的所有外部链接。在下面的示例中,我们将使用^“starts With”属性子字符串选择器向所有以http://开头的链接添加背景图像和填充,如下所示:

  1. A [href ^ =“http://”] {
  2. background:url(img / external.png)100%50%不重复;
  3. 填充右:15像素;
  4. }

这很好,但偶尔会有以http://开头的内部链接。在这种情况下,您不希望显示图标。我们可以通过在初始规则下面添加另一个规则(它们具有相同的特异性)来解决此异常,从而使外部链接的属性设置无效。保留^运算符,因为链接可能会转到站点内的各个页面。

  1. A [href ^ =“http://”] {
  2. background:url(img / external.png)100%50%不重复;
  3. 填充右:15像素;
  4. }
  5. a [href ^ =“http://mysite.com”],[href ^ =“http://www.mysite.com”] {
  6. 背景:无;
  7. 填充右:0;
  8. }

^运算符的另一个用例可能是以。开头的目标链接
邮寄地址:字符串并添加一个图标,如邮件图标:

  1. A [href ^ =“mailto:”] {
  2. background:url(img / email.png)100%50%不重复;
  3. 填充右:15像素;
  4. }

The :last-child pseudo-selector, “starts with” (^) substring selector and first-of-type pseudo-class combined with first-letter in action

:last-child伪选择器,“以”开头“(^)子串选择器和第一个类型伪类与行动中的第一个字母相结合

“结束于”子串选择器

我们已经处理过“开头”,现在我们将看看“以......结尾”。这个运算符是美元符号,$

语法与“starts with”语法完全相同,常见用例包括添加图标以表示文档下载的不同文件类型或指示不同的Feed类型。为了表明链接转到PDF文档,我们可以使用:

  1. A [href $ =“。pdf”] {
  2. background:url(img / pdf.png)100%50%无重复;
  3. 填充右:18像素;
  4. }

此方法可用于定位任何文件类型,例如.doc,.jpg,.atom或.xml。

This example uses “ends with” ($) and “contains” (*) substring selectors

此示例使用“ends with”($)和“contains”(*)substring selectors

“包含”子串选择器

最终的子串选择器使用星号或星号(*)运算符,代表“包含”。当我们希望定位具有多个类的元素时,这很有用。它还可用于定位锚点内的特定域。我们将在以下示例中使用它来突出显示链接到某个人的Twitter帐户的锚点:

  1. A [href * =“twitter”] {
  2. background:url(img / twitter.png)100%50%不重复;
  3. 填充右:20像素;
  4. }

使用^运算符和值可以实现相同的效果Http://twitter.com,但使用(*)运算符可以帮助我们节省几个字节。然而,当我们需要根据Twitter的句柄不同地设置其中一个Twitter链接时,*子串选择器的真正威力就来了(例如http://twitter.com/chrisdavidmills)。为了澄清,所有链接都包含推特如上例所示,但只有一个包含Chrisdavidmills

  1. A [href * =“chrisdavidmills”] {
  2. background:url(img / twitter.png)100%50%不重复;
  3. 填充右:20像素;
  4. 颜色:#FF0;
  5. }

我们还可以使用*运算符将不同的样式应用于指向我们已经表示为朋友,家庭成员和其他使用XFN微格式的人的页面的链接,通过他们选择相对属性值。例如,为了表明Chris Mills是我们的朋友,我们的标记将是:

  1. 克里斯米尔斯

因为有两个值相对属性,使用该目标变得困难^要么$运营商,所以*(contains)成为一个选项,CSS 2.1代字号(〜)也是一个选项,它以一个以空格分隔的单词列表为目标,其中一个单词等于该值。这里我们将使用新的CSS3子串选择器*

  1. A [rel * =“friend”] {
  2. background:url(img / friend.png)100%50%不重复;
  3. 填充右:20像素;
  4. }

这会导致一个问题:我们的Chris的Twitter图标已被XFN图标覆盖,因为两种样式规则具有相同的特异性,A [rel * =“friend”] {...}规则出现在我们的样式表中。我们可以通过在我们的朋友规则中添加一些额外的填充并使用多个背景图像添加放置在不同位置的两个图标来解决这个问题:

  1. A [rel * =“friend”] {
  2. 背景:
  3. url(img / friend.png)100%50%不重复,
  4. url(img / twitter.png)85%50%不重复;
  5. 填充右:40像素;
  6. }

结构伪类

结构伪类让我们设置DOM中元素和元素的一部分,但不能用其他选择器作为目标。它们使您的标记保持干净和高效,替换标记中添加的无关类,无论是源代码中的那些还是使用JavaScript动态添加的类。

:最后一个孩子

这是为了定位另一个元素的最后一个子元素。我们可以使用它来删除列表中最后一项的边框,例如:

  1. Nav Li:last-child {
  2. 右边框:0;
  3. }

:第一个孩子伪类在CSS 2.1中引入并且工作原理相同
作为:最后一个孩子除了它是另一个元素的第一个匹配的孩子。

:第n个孩子

:第n个孩子伪类允许我们定位给定父元素的一个或多个特定子元素。它可以采用数字(整数),关键字(奇数或偶数)或计算(表达式)的形式。当您想要设置数据表或复杂列表的样式时,它可以派上用场(请参阅问题216,第78页)。我们首先会显示关键字值甚至添加背景颜色以在备用表行上创建斑马条带效果,以提高传统上可在服务器端实现的可读性,使用JavaScript或向标记添加类:

  1. Tr:nth-child(偶数)td {
  2. 背景色:#eee;
  3. }

我们可以使用表达式'2n'或'2n + 0'来实现与上一个示例相同的效果,这意味着“每隔一行设置一次”:

  1. tr:nth-child(2n)td {
  2. 背景色:#eee;
  3. }

如果我们想要反转行着色并将背景颜色应用于奇数行,我们可以使用odd关键字或表达式'2n + 1',这意味着'每隔一行从第一行开始'。以下示例具有完全相同的效果:

  1. tr:nth-child(odd)td {
  2. 背景色:#eee;
  3. }
  4. tr:nth-child(2n + 1)td {
  5. 背景色:#eee;
  6. }

到目前为止?好。使用类似于我们之前看到的表达式,让我们假设我们想要定位表的每四行。只需使用:

  1. tr:nth-child(4n)td {
  2. 背景色:#eee;
  3. }

从第二行开始的每四个项目怎么样?

  1. tr:nth-child(4n + 2)td {
  2. 背景色:#eee;
  3. }

我们可以看到一种模式出现。现在让我们来讨论那个想要倒退的聪明孩子。想象一下,我们想要在表格中设置前五行的样式。这是使用'n'的负值实现的:

  1. tr:nth-child(-n + 5)td {
  2. 背景色:#eee;
  3. }

Zebra striping using the nth-child structural pseudo-class with ‘even’ argument on the left and using the ‘4n+2’ expression on the right

斑马条纹使用nth-child结构伪类在左边使用'even'参数并使用右边的'4n + 2'表达式

:第n-最后孩子

:第n-最后孩子伪类基本上是一样的:第n个孩子但它从最后一个元素开始计算。使用与前一个示例相同的表达式,我们可以突出显示表中的最后五行:

  1. tr:nth-last-child(-n + 5)td {
  2. 背景色:#eee;
  3. }

也就像:第n个孩子:第n-最后孩子接受'奇数'和'偶数'参数,并且不必对'n'使用负值。

:唯一的孩子

我们还有一个“子”伪类可供查看。:唯一的孩子通过在任何元素是其父元素的唯一子元素时将其作为目标。如果我们有一个只包含一个项目的动态生成列表,这可能会很有用,在这种情况下应该减少边距:

  1. Ul Li:only-child {
  2. 边距:2em的;
  3. }

:第一型的

'type'伪类倾向于以与'child'类相同的方式工作,关键区别在于'type'伪类仅针对与应用选择器的元素相同的元素。当我们无法保证不会有任何其他子元素时,它们就很有用。例如,如果是小时通过使用放在每个段落之间:第一型的,我们可以确保我们只针对段落。考虑一节中包含的介绍段落(

)。运用:第一型的,我们可以在该部分中设置第一段的样式,如下所示:

  1. #introduction P:first-of-type {
  2. 字体大小:18像素;
  3. 字体重量:粗体;
  4. }

为了一些额外的凉爽,我们可以结合起来:第一型的与::第一个字母CSS 1中的伪元素(是的,1)用于设置引言中第一段的第一个字母。请注意,CSS3为伪元素引入了一种新的双冒号(::)语法,以区分它们和伪类,如:徘徊。我们在下面的示例中使用了双冒号语法,但是由于向后兼容性,将它用于客户端工作可能是一个坏主意:

  1. #introduction p:first-of-type :: first-letter {
  2. 字体大小:60像素;
  3. 向左飘浮;宽度:汽车;
  4. 高度:50像素;
  5. 行高:1;
  6. 保证金右:5px的;
  7. }

:式中最后

运用:式中最后,我们可以达到同样的效果:最后一个孩子。要从最后一个菜单项中删除右边框,我们可以使用:

  1. Nav Li:last-of-type {
  2. 右边框:0;
  3. }

:第n型-

:第n型-的工作方式与:第n个孩子并使用相同的
句法。但是,它可能比更有用:第n个孩子是否应该有目标之间的元素。以下示例包含一个带有标题的部分,后面是一个包含空间动物图像的列表:

  1. 太空中的动物

    • 果蝇
    • 艾伯特二世
    • 老鼠
    • Tsygan
    • 莱卡
    • [...]

现在我们将删除列表创建的项目符号,声明宽度,浮动每个列表并添加一些边距:

  1. #animals Ul {
  2. 列表样式类型:无;
  3. 宽度:670px;
  4. }
  5. #animals Li {
  6. 向左飘浮;
  7. 宽度:200像素;
  8. 文本对齐:中心;
  9. 保证金权:35px;
  10. 边距:35px;
  11. }

想象一下,边距导致第三个列表项放到新行上但我们的设计要求每行应该有三个图像。这提供了完美的用例:第n型-定位每个第三个列表项(3N)并删除右边距以确保它们不会掉到新线上:

  1. #animals li:nth-of-type(3n){
  2. 余量右:0;
  3. }

和。一样:第n个孩子,我们也可以使用表达式(2n + 1)或关键字(奇数或偶数)来定位某些元素。:第n-的,典型值E也可用于使用表达式定位组中的第一个项目Li:nth-of-type(1){...},与使用效果相同:第一型的

On the left, the basic styling of the list of animals in space, on the right is the same list styled using the nth-of-type and last-of-type structural pseudo-classes

在左边,右边是动物列表的基本样式,右边是使用nth-of-type和last-of-type结构伪类样式的相同列表

:第n-最后型 -

运用:nth-last-of-type(1){...}与使用相同:式中最后但是,结合表达式,它让我们从最后一项开始向后计数,比如:第n-最后孩子。用我们的第n-的型例如,我们将通过添加一个大的左边距将最后一只孤独的动物从我们的10列表移动到中心:

  1. #animals Li:nth-last-of-type(1){
  2. 保证金左:235px;
  3. }

:只有-型

:只有-型目标元素,其父元素没有其他相同类型的子元素。想象一下,我们有一篇文章可以包含几个图像但如果只包含一个图像,我们可能希望它是全宽的。这是哪里:只有-型自成一体:

  1. Article Img:only-of-type {
  2. 宽度:100%;
  3. }

:空

:空可以是一个非常有用的伪类。它代表一个没有内容的元素。假设我们在页面中有动态生成:我们使用:空如果它没有内容,则隐藏它。

  1. 旁边:空{
  2. 显示:无;
  3. }

在我们开始欢呼之前,请注意一句:如果浏览器找到单个字符,甚至是空格,那么该元素将被渲染,因为它不再正确匹配:空选择。可以在标记中添加HTML注释,但确保没有空格。

:不()

在许多方面否定伪类:不()与其他选择器相反,因为它使我们能够定位元素匹配选择器的参数。奇怪,我们知道,但它非常实用。一个主要的例子是样式所有表单输入不是提交按钮:

  1. 输入:not([type =“submit”]){
  2. 宽度:250像素;
  3. 边框:1px Solid#333;
  4. }

这使我们不必仅仅为了样式目的而将一个无关的类添加到提交按钮。或者从另一方面看,它节省了必须为每个其他输入添加一个类。那个标记看起来已经很精简吧?

我们还可以在测试期间使用否定伪类来捕获那些验证不会的东西。例如,假设我们想要查看没有指定title属性的所有缩写。只需使用:

  1. Abbr:not([title]){
  2. 大纲:2px点缀红色;
  3. }

可以使用相同的技术突出显示未指定alt属性的图像:

img:not([alt]){outline:2px点缀红色; }

这是Eric Meyer在他的诊断CSS中使用的一种技术(meyerweb.com/eric/ tools / css / diagnostics /)。在测试时添加诊断文件以捕获所有这些错误,修复它们并在准备好部署到站点时删除该文件。

浏览器支持

那么这一切在现实世界中的浏览器中如何运作?好吧,CSS3选择器完全支持IE9 +,Firefox 3.5 +,Chrome 4 +,Safari 4+和Opera 10+(除了三个小例外)。 IE6,IE7和IE8中的支持几乎不存在(IE7和IE8支持通用兄弟组合器和所有属性选择器),但我们可以通过使用本机JavaScript或jQuery库进行填充来解决这个问题。

CSS3 Selector compatibility tables found at http://www.findmebyip.com

CSSF选择器兼容性表位于http://www.findmebyip.com

我们可以使用的一种有用的填充物是Selectivzr凯斯克拉克或者,如果我们认为这些洒水中的一些仅作为增强功能添加并且对于网站的功能并不重要,那么它们可以不在功能较弱的浏览器中显示。这是你的选择。

Selectivzr is a JavaScript polyfill to emulate CSS3 selectors in Internet Explorer by Keith Clark – find out more at selectivizr.com

Selectivzr是一个JavaScript polyfill,用于在Keith Clark中模拟Internet Explorer中的CSS3选择器 - 请访问selectivizr.com了解更多信息

在v9之前使用IE的一个警告是,当它分组选择器并遇到它不理解的选择器时,它会忽略整个规则。所以如果我们有:

  1. ul li:nth-child(3n),ul li.last {
  2. Margin-right:0;
  3. }

IE将无法识别该规则。因此,我们需要将它们分成自己的规则,如下所示:

  1. ul li:nth-child(3n){
  2. Margin-right:0;
  3. }
  4. Ul Li.last {
  5. Margin-right:0;
  6. }

摘要

我们已经了解到,通过使用强大的CSS3选择器,我们不需要在标记中添加不必要的类和ID,从而确保我们可以真正地将内容和表示彼此分开。我们已经看到了如何定位组中的第一个,最后一个,奇数个或偶数项。我们还学习了如何使用表达式和自己的表达式来定位元素组。

我们已经了解了如何使用负伪类来帮助进行测试和诊断。但是还有更多的CSS3选择器,我们没有时间来覆盖。这些包括UI元素状态伪类,一般兄弟组合,:目标(值得一篇自己的文章),新的双冒号语法::之前::后还有很多。

查看选择器3级W3C建议书,可在以下网址找到www.w3.org/TR/css3-selectors



翻译字数超限