具体应用

后代选择器的功能极其强大。有了它，可以使 HTML 中不可能实现的任务成为可能。

假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。

解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。然后编写以下样式：

div.sidebar {background:blue;}

div.maincontent {background:white;}

div.sidebar a:link {color:white;}

div.maincontent a:link {color:blue;}

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

因此，ul em 将会选择以下标记中的所有 em 元素：

List item 1
1. List item 1-1
2. List item 1-2
3. List item 1-3
  1. List item 1-3-1
  2. List item 1-3-2
  3. List item 1-3-3
4. List item 1-4
List item 2
List item 3

CSS 子元素选择器

与后代选择器相比，子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

选择子元素

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器(Child selector)。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

This is very very important.

This is really very important.

语法解释

您应该已经注意到了，子选择器使用了大于号(子结合符)。

子结合符两边可以有空白符，这是可选的。因此，以下写法都没有问题：

h1 > strong

h1> strong

h1 >strong

h1>strong

如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

结合后代选择器和子选择器

请看下面这个选择器：

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

css选择器所有后代,CSS 后代选择器相关推荐

CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
html的css样式中表示后代选择器,html添加css——样式选择器
如何给html添加样式.两种方法:css 1.新创建一个css样式表,与原html同目录,而后经过link标签连接.如:(link标签是一个void元素,无结束标签.)html 2.直接在html源码 ...
【温故知新】CSS学习笔记（后代和子代选择器）
后代和子代选择器 CSS的选择器除了之前介绍的基本选择器之外,还有符合选择器,可以处理一些基本选择器无法处理的难题. 1.后代选择器比如下面的例子,我们需要将所有的"Hello" ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
css里的符号含义【串联选择器】和【后代选择器】
先介绍一下串联选择器和后代选择器的概念. 串联选择器作用在同一个标签上. <div class="a" id ="qq"><span> ...
css复合选择器（后代选择器、子代选择器、并集选择器、链接伪类选择器、：focus选择器）
什么是复合选择器? 在css中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的. 复合选择器可以更准确.更高效的选择目标元素(标签 ...
CSS之后代、子代选择器的区别
后代.子代选择器的区别子代选择器后代选择器子代选择器后代选择器子代选择器只选中父级元素的亲一代,父子级之间用大于号">"连接后代选择器选中的是指定元素的所有后代, ...
前端(四)——CSS之导入方式、各类选择器
文章目录 1. CSS简介 1.1 什么是CSS 1.2 CSS发展史及其优势 1.3 快速入门 2. CSS的三种导入方式 3. 基本选择器 4. 层次选择器 5. 结构伪类选择器 6. 属性选择器 ...
css基础选择器教程,CSS核心基础一些常见的选择器的使用小白教程
要想将CSS样式应用于特定的HTML元素,首先要找到该目标元素.在CSS中,执行这一任务的样式规则部分被称为选择器.在CSS中有很多的选择器,包含标记(标签)选择器.类别选择器.id选择器.通配符选择 ...

css选择器所有后代,CSS 后代选择器

This is very very important.

This is really very important.

css选择器所有后代,CSS 后代选择器相关推荐

最新文章

热门文章