专栏首页编程【CSS选择符】后代选择符

【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 条评论
登录 后参与评论

相关文章

  • 利用好这些代码把SEO优化做到极致,最后一个你肯定没用

    SEO 本期主题,利用好HTML代码让网站优化更上一层楼, 很多人认为网站优化和代码没有什么关系,其实不然,代码和优化也有着千丝万缕的关系。如果代码这一步不弄好...

    企鹅号小编
  • 网站代码该这样优化?

    网站代码的优化也是网站优化中的一种优化措施,代码对于网站优化来说非常重要。虽然HTML代码是程序员应该精通的语言,但是对于HTML代码的优化应该是SEO专员应该...

    企鹅号小编
  • 这才是简单快速入门Python的正确姿势!

    作者/分享人:张杨,热爱技术分享,活跃于今日头条和腾讯课堂,开设的《Python3网络爬虫入门》、《Python开发课程》等专栏受到好评。 一、前言 强烈建议:...

    企鹅号小编
  • SEO优化搜索引擎能识别的常用标签有哪些

    2. html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/。

    高级优化师
  • HTML标签分类

    在HTML页面中,带有“<>”符号的元素被称为HTML标签,如 <HTML>、<head>、<body>、<head>等都是HTML骨架结构标签。所谓标签就是放...

    爱知汇
  • 前端基础-HTML

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java
  • HTML中的容器标签

    什么是容器标签?在HTML开发中我们常常会使用一类标签作为容器放置一些内容,我们把这类标签称之为容器标签,可以作为容器标签的包括列表标签、表格标签、框架标签、布...

    一墨编程学习
  • 用户画像实践:神策标签生产引擎架构

    导读:用户画像是建立在数据基础之上的用户模型,是产品改进、精准营销等业务场景中不可或缺的重要基础。而构建用户画像的过程就是要给用户打上各种维度的标签,并基于标签...

    木东居士
  • 001.html常用的基础知识点

    主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

    qubianzhong
  • HTML标签

    HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行...

    星辰_大海

扫码关注云+社区

领取腾讯云代金券