【CSS选择符】后代选择符

在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始祖。和标签在标签里,所以标签是二者的祖辈。

先看看一段HTML代码:

Document

Header

A paragraph of importanttext.

以下是结构示意图

祖辈:外层HTML标签是内层标签的祖辈。标签是其内部所有标签(、

标签)的祖辈。

后代:标签里的其他标签是后代。标签是标签的后代,

标签即使标签的后代,也是标签的后代。

父辈:父辈标签是另一个标签的直接祖辈。标签是和的父辈,而不是其他标签的父辈;

标签是标签的父辈。

子代:直接被另一个标签保卫的标签是外层标签的子代。和

是标签是标签的子代,而标签不是。标签直接包含在

标签里,所以是

标签的子代。

同辈:父辈相同的标签叫同辈标签,相当于兄弟姐妹。如和是同辈标签,和

也是同辈标签。

在CSS中,后代选择器的写法是:

祖辈 后代 { 样式 ; }

首先,先找到祖辈,然后中间有一个空格,空格后面跟着后代。

例如

header h1 { color: red;}

意思就是标签里的所有标签,字体都改成红色。

在标签外的标签,不会受到上面那行代码的影响。

后代选择符可以由2个以上元素组成,例如:

ul li a

body li a

html li a

html body ul li a

以上四个选择符的作用相同,因此表明,无需指明目标标签的所有直系。

一般来说,应该使用能达到目的的最简短的后代选择符。所有标签都在和标签里,因此没要在后代选择符中指定和。

后代选择符里的选择符数量会影响冲突样式的处理方式,这种冲突处理机制成为特指度。会在后面的笔记中讲到。

同样的,后代选择符也不局限于只能使用类型选择符。

可以使用不同类型的选择符构建复杂的后代选择符。例如

.intro a { color: yellow; }

意思就是:如果某个标签的类为intro,就把上述样式应用到这个标签的所有链接后代(a)上。

注意:

p.intro和p .intro不一样。前者是没空格隔开的。

p.intro的意思是:类为intro的

标签。

p .intro的意思是

标签里面的所有类为intro的标签。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171226G044Y900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券