《图解CSS3:核心技术与案例实战》——2.3节层次选择器

简介:

本节书摘来自华章社区《图解CSS3:核心技术与案例实战》一书中的第2章,第2.3节层次选择器,作者 大漠,更多章节内容可以访问云栖社区“华章社区”公众号查看

2.3 层次选择器
层次选择器通过HTML的DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系,通过其中某类关系可以方便快捷地选定需要的元素。

2.3.1 层次选择器语法
层次选择器是一个非常好的选择器,也是大家常用的选择器,其详细说明如表2-3所示。


5a51ebad191726ef4a065b7ef518326fc25a413d

2.3.2 浏览器兼容性
浏览器的兼容性如表2-4所示。从表中可以看出,子选择器、相邻兄弟选择器和通用兄弟选择器要IE 7以及其以上版本才支持,随着IE 6的慢慢消失,层次选择可以放心使用。


640c3f7344418ad87940f14726ee48139ae1af63

2.3.3 实战体验:使用层次选择器选择元素
在层次选择器中,后代选择器与子选择器是比较常用的,而对于相邻兄弟选择器和通用兄弟选择器而言,平时大家并不常使用,特别是CSS3选择器中新增的通用兄弟选择器。下面通过示例来演示各种层次选择器在页面中如何选择HTML的DOM元素的方法。
页面中有10个div元素,其中第四个div中包含了2个div,另外第七个div包含了第八个,而第八个div又包含了第九个div,并且第九个div包含了第十个div。下面通过层次选择器来改变div的样式风格。
新创建一个HTML文件 2-2.html,代码如下。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>使用CSS3层次选择器</title>
  <style type="text/css">
    *{margin: 0;padding:0;}
    body {width: 300px;margin: 0 auto;}
    div{margin:5px;padding:5px;border: 1px solid #ccc;}
  </style>
</head>
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4
    <div>5</div>
    <div>6</div>
  </div>
  <div>7
    <div>8
      <div>9
        <div>10</div>
      </div>
    </div>
  </div>
</body>
</html>

在具体使用层选择器之前,先来看看页面的初步效果,如图2-8所示。


c4487cb26101ee0c413abf124fe978bde5caeb39

为了更好地理清这些div的层次关系,可以先将示例中的body部分画一个DOM树形草图,如图2-9所示。


9aa7638bbc331b2435546fea85b41dcbc6fdbf6e

2.3.4 后代选择器
后代选择器(E F)也称为包含选择器,作用就是可以选择某元素的后代元素。例如“E F”,E为祖先元素,F为后代元素,表达的意思就是选择E元素的所有后代F元素。这里的F元素不管是E元素的子元素、孙辈元素或者更深层次的关系,都将被选中。换句话说,不论F在E中有多少层级关系,F元素都将被选中。接下来使用后代选择器来改变其背景色。

*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}

一起来看使用后代选择器改变了哪几个div的背景色,如图2-10所示。


7d928e51b038607a18f49942e861989152496e44

2.3.5 子选择器
子选择器(E > F)只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F表示选择了E元素下所有子元素F。这与后代选择器(E F)不一样,在后代选择器中F是E的后代元素,而在E>F中F仅仅是E的子元素而已。接下来通过例子,选择器改变body下的子元素div的背景色。

*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}
body > div {background: green;}

通过上面子选择器的运用,你能猜出body的10个div中,哪几个背景色将变成绿色呢?来看图2-11的效果。


bb82b0de2295120672482974fc77e185fef42b11

2.3.6 相邻兄弟选择器
相邻兄弟选择器(E + F)可以选择紧接在另一个元素后的元素,它们具有一个相同的父元素。换句话说,E和F是同辈元素,F元素在E元素后面,并且相邻,这样就可以使用相邻兄弟选择器来选择F元素。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>使用CSS3层次选择器</title>
  <style type="text/css">
    *{margin: 0;padding:0;}
    body {width: 300px;margin: 0 auto;}
    div{margin:5px;padding:5px;border: 1px solid #ccc;}
    div div {background: orange;}
    body > div {background: green;}
    .active + div {background: lime;}
  </style>
</head>
<body>
  <div  class="active">1</div>
  <!-- 为了说明相邻兄弟选择器,在此处添加一个类名active -->
  <div>2</div>
  <div>3</div>
  <div>4
    <div>5</div>
    <div>6</div>
  </div>
  <div>7
    <div>8
      <div>9
        <div>10</div>
      </div>
    </div>
  </div>
</body>
</html>

此时第二个div的背景色将变成“lime”色,如图2-12所示。


a4a3f607140f8769cca6a90d93c4049bd852d36c

2.3.7 通用兄弟选择器
通用兄弟选择器(E~F)是CSS3新增加的,用于选择某元素后面的所有兄弟元素,它们和相邻兄弟选择器类似,需要在同一个父元素之中。也就是说,E和F元素都是同辈元素,并且F元素在E元素之后,E~F将选中E元素后面的所有F元素。如下面的代码所示。

*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}
body > div {background: green;}
.active + div {background: lime;}
.active ~ div {background: red;}

这样,只要是div.active的兄弟元素div,并且在div.active之后,其背景色将变成红色,如图2-13所示。


062ce8b8800a38e5c97c6c70d8bd778a5dc57207


e19fa9e49be7242669d2126e7b49da5af91b1aba
相关文章
|
3天前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
14天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
11 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
15天前
|
移动开发 前端开发 HTML5
CSS 【实战】 “四合院”布局
CSS 【实战】 “四合院”布局
18 0
CSS 【实战】 “四合院”布局
|
22天前
|
前端开发 开发者
CSS伪类选择器:增强内容表现力的利器
CSS伪类选择器:增强内容表现力的利器
16 4
|
12天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
15 0
|
14天前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
19 0
|
14天前
|
前端开发 JavaScript
CSS【实战】抽屉动画
CSS【实战】抽屉动画
13 0
|
16天前
|
前端开发
css实战——清除列表中最后一个元素的下边距
css实战——清除列表中最后一个元素的下边距
19 0
|
18天前
|
前端开发 JavaScript
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
30 0
|
18天前
|
前端开发
前端 CSS 经典:好用的 CSS 选择器
前端 CSS 经典:好用的 CSS 选择器
15 0