【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的标签。

本文来自企鹅号 - Rabbit媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程坑太多

html元素(标签)

36920
来自专栏杨龙飞前端

dispaly属性,position属性

35150
来自专栏淡定的博客

css3的一些新属性总结

box-sizing规定了盒子的计算方式,常用于消除hover时,盒子之间的影响,有三个属性:

8810
来自专栏性能与架构

CSS选择器是如何确定优先级的?

先看下面的示例 <div id="content"> <p id="title">Hello world</p> </div> 有如下的2个css选择器...

313100
来自专栏Java后端技术

CSS总结

  1.继承:子元素继承父元素的某些样式(因为有些元素有默认值,所以它们就不用继承父元素的)。

10110
来自专栏别先生

CSS入门级学习

css入门学习 1:认识CSS   1.1:css简介,css全称是层叠样式表,Cascading style sheets   1.2:css的作用,主要是...

24970
来自专栏Python Web学习记录及整理

CSS学习记录及整理

<!DOCTYPE ”此文仅为个人学习的知识梳理,权威且更详细的内容请查阅w3school。“>

45780
来自专栏AndroidTv

前端入门4-CSS属性样式表声明正文-CSS属性样式表

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

12330
来自专栏十月梦想

框模型

     元素框的实际宽度:width+左右外边距+左右border边框+左右内边距

14630
来自专栏菜鸟计划

CSS布局(二) 盒子模型属性

盒子模型的属性 宽高width/height   在CSS中,可以对任何块级元素设置显式高度。   如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效...

51370

扫码关注云+社区

领取腾讯云代金券