图解css3:核心技术与案例实战. 2.3 层次选择器

简介:

2.3 层次选择器

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

2.3.1 层次选择器语法

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

表2-3 层次选择器语法

选择器     类型         功能描述

E F          后代选择器(包含选择器)         选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内

E > F 子选择器         选择匹配的F元素,且匹配的F元素是所匹配的E元素的子元素

E + F 相邻兄弟选择器     选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面

E ~ F     通用选择器     选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

 

2.3.2 浏览器兼容性

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

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所示。

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

 

图2-9 body的树形结构

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所示。

 

图2-10 使用后代选择器的效果

意     后代选择器两选择符之间必须以空格隔开,中间不能有任何其他符号插入。

 

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的效果。

 

图2-11 使用子选择器的效果

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所示。

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所示。

意     通用兄弟选择器选中的是与E元素相邻的后面兄弟元素F,其选中的是一个或多个元素;而相邻兄弟选择器选中的仅是与E元素相邻并且紧挨的兄弟元素F,其选中的仅是一个元素。

相关文章
|
5天前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
16天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
11 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
16天前
|
移动开发 前端开发 HTML5
CSS 【实战】 “四合院”布局
CSS 【实战】 “四合院”布局
19 0
CSS 【实战】 “四合院”布局
|
10天前
|
前端开发 索引 Python
技术心得:xpath、CSS定位方法
技术心得:xpath、CSS定位方法
|
14天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
15 0
|
16天前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
19 0
|
16天前
|
前端开发 JavaScript
CSS【实战】抽屉动画
CSS【实战】抽屉动画
13 0
|
14天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
56 0
|
18天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
26天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js