dudo博客

英文原文:http://www.456bereastreet.com/archive/200510/css_21_selectors_part_2/
中文翻译:http://www.dudo.org/article.asp?id=194
本文是关于CSS2.1选择符系列文章的第二部分。第一部分主要是讲关于类型选择符、类class选择符、id选择符、通配选择符和简单选择符的基础知识。
而在本部分中,我们主要讲一下选择符的高级应用,这不仅仅包括已经在主流浏览器中得到广泛支持的那些选择符。现在,浏览器对选择符的支持越来越完善,因此完全有必要拿出点时间来了解一下本文所介绍的所有选择符。

选择器

选择器用于将组成混合选择符的多个简单选择符分隔开来。CSS2.1中定义的选择器包括空格(任何数目的tab制表位、空格、具有空格性质的其他字符),大于号“>”和加号“+”。在现在的章节中我们将一一介绍这些选择器的使用。

后代选择符

后代选择符由两个或者多个简单选择符通过空格分隔而组成。他匹配第一个简单选择符对应元素的所有后代元素。例如,下面这条规则将会应用到是div后代的p元素上去:

div p { color:#f00; }

任何形式的简单选择符都可以是后代选择符的组成部分。下面的例子中CSS规则将会应用到id是myid的div中的、li元素下的、类名为info的p元素中:

div#myid li p.info { color:#f00; }

后代选择符可以使我们在不用指定id或者class的情况下选取目标元素,这有助于使文档中的标记更加简洁。假设我们有一个如下结构的导航菜单:


要选取导航栏中的列表元素和超级链接,我们可以使用下面的CSS规则:

#nav li { display:inline; }
#nav a { font-weight:bold; }

上面的规则不会应用到文档中的所有列表元素和链接中去。和一一给它们指定一个class相比,使用后代选择符会使你的文档清洁不少。

子选择符

子选择符用于择取指定元素的直接后代。子选择符由两个或者多个选择符通过大于号“>”分隔而成。父元素在“>”的左侧,在选择器“>”的两侧允许有空白存在。

下面的规则将会就用到所有div的子元素strong中去:

div > strong { color:#f00; }

只有是div直接后代的strong元素才是这条规则的目标元素。如果文档中在div和strong元素中间有其他元素的话,这条规则就是无效的。下面的例子中只有“Text one”样式受上面规则的影响:

Text one

Text two

相邻的兄弟选择符

相邻的兄弟选择符由两个或者多个简单选择符通过加号“+”分隔而组成。加号两侧允许有空白存在。它匹配第一个元素的下一个兄弟元素,这两个元素必须具有相同的父元素,并且第一个元素和第二个元素在其前与其紧密相邻:

p + p { color:#f00 }

如果把上面这条规则应用到下面的例子中,那么“Paragraph two”样式受影响:

Paragraph one

Paragraph two

分组

之所以在这里讲分组,是因为我发现在学习分组混合选择符的时候经常会有人出错。

如果利用几个不同的选择符对不同元素应用相同的样式时,就可以使用逗号“,”把它们分组而不用为每个选择符重复同样的规则了。这里最容易出现的错误就是选择符的不完整。假设我们有下面这么一段代码:

News

  • Item 1
  • Item 2

假设我们要给只有在id为news的div下的三级标题和列表元素应用相同的规则,那么下面这种写法就是错误

div#news h3, ul {
	margin:0 2em;
}

它会影响到div#news下的h3和ul元素,但是问题就在于它同样会影响到文档中所有ul元素,而不仅仅是div#news下的ul元素。

下面这种写法才是正确的分组选择符的写法:

div#news h3,
div#news ul {
	margin:0, 2em;
}

因此,在使用分组选择符时,一定要记住选择符书写完整。

属性选择符

属性选择符根据属性名称或者属性值来匹配元素。属性选择符有四种匹配模式:
[att]
匹配所有拥有att属性的元素,与属性值无关
[att=val]
匹配所有拥有att属性且属性值为val的元素
[att=~val]
匹配所有拥有att属性的元素且val是其属性值由空白分隔开的一个完整单词。在这各情况下val中间没有空白。
[att|=val]
匹配所有拥有att属性的元素,并且att的属性值是由连字符组成,val处于连字符的开始。它主要用于通过lang属性指定特定语言的情况中,例如:“en”、“en-us”,“en-gb”等等。

下面是一些例子。
匹配有title属性的p元素而不管它的值是多少:

p[title] { color:red; }

下面的例子将匹配class属性等于error的div元素

div[class=error] { color:#f00; }

要匹配headers属性中含有“col1”的td元素则可以使用下面的规则:

td[headers~=col1] {color:#f00}

最后,下面的这条规则就匹配lang属性值中连字符前半部分以“eu”开始的p元素:

p[lang|=en] { color:#f00' }

在同一个选择符中多个属性选择符可以同时使用。这样我们就可以用多个不同的属性值来区分相同的元素了。下面这个例子将会匹配到属性class值为quote且有cite属性(不管值是多少)的blockquote元素:

blocquote[class=quote][cite] { color:#f00; }

待续……

这一部分就是这些内容了。在最后的第三部分中,我主要想讲一下伪类和伪元素选择符。到这里你可以先回顾一下第一部分中的内容,重复是学习的好方法:)。

细说CSS样式选择符(三)——CSS 2.1 Selectors
细说CSS样式选择符(一)——CSS 2.1 Selectors



共有(2)条评论

[…] 细说CSS样式选择符(二)——CSS 2.1 Selectors 细说CSS样式选择符(一)——CSS 2.1 Selectors (1) Comment Read […]


[…] [译稿]细说CSS样式选择符(二)——CSS 2.1 Selectors [译稿]细说CSS样式选择符(三)——CSS 2.1 Selectors (1) Comment Read More […]


随便说两句
名字:
Email:
网站:
内容:

无觅相关文章插件,快速提升流量