web CSS的知识- 关于后代选择器，子选择器，兄弟选择器的使用

1. 后代选择器
官方解释：后代选择器可以选择作为某元素后代的元素。
理解：选择某一标签的后代中，所有的此标签标记
例：ul em {color:red;}
就是选择，h1标签后代中中，所有的em。
代码如下：
如果选择器写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
红色标签就是受影响的标签

 1 <ul>
 2   <li>List item 1
 3     <ol>
 4       <li>List item 1-1</li>
 5       <li>List item 1-2</li>
 6       <li>List item 1-3
 7         <ol>
 8           <li>List item 1-3-1</li>
 9           <li>List item <em>1-3-2</em></li>
10           <li>List item 1-3-3</li>
11         </ol>
12       </li>
13       <li>List item 1-4</li>
14     </ol>
15   </li>
16   <li>List item 2</li>
17   <li>List item 3</li>
18 </ul>

2.子选择器
官方解释：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
理解：选择的元素，必须是直系儿子元素，之间不能有间隔
例：h1 > strong {color:red;}
就是选择，h1的直系儿子中<strong>标签
红色标签就是受影响的标签

1 <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
2 <h1>This is <em>really <strong>very</strong></em> important.</h1>

第二个<strong>不会变，是因为，第二个<string>不是<h1>的子元素，只是后代元素
3.相邻兄弟选择器
官方解释：可选择紧接在另一元素后的元素，且二者有相同父元素。
理解：选择的是两个紧紧相邻的元素，而且两个元素必须有相同的父元素
例：h1 + p {margin-top:50px;}
选择的是p必须紧跟h1元素后面，而且两个有相同的父元素的两个元素
请看下面这个文档树片段：
红色标签就是受影响的标签

 1 <div>
 2 <ul>
 3 　　<li>List item 1</li>
 4 　　<li>List item 2</li>
 5 　　<li>List item 3</li>
 6 </ul>
 7 <ol>
 8 　　<li>List item 1</li>
 9 　　<li>List item 2</li>
10 　　<li>List item 3</li>
11 </ol>
12 </div>

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。
请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：
li + li {font-weight:bold;}
注意：在遇到，这样三个或者是多个元素相邻的，兄弟选择器会选择第二个和第三个。

转载于:https://www.cnblogs.com/tangwanzun/p/5955595.html

web CSS的知识- 关于后代选择器，子选择器，兄弟选择器的使用相关推荐

HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器交集选择器由两个选择器直接构成,其中第一个 ...
css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(& ...
CSS之毗邻选择器与普通兄弟选择器的区别
CSS之毗邻选择器与普通兄弟选择器的区别在一些教程网站上只看到兄弟选择器的说法,也就是加号(+),但是偶然听说了毗邻兄弟选择器的说法所以特意实验一下,找一下区别. 从字面意思来看:毗邻兄弟选择器即 ...
CSS3中的群组选择器,后代选择器[空格]子元素选择器＞相邻兄弟选择器+兄弟选择器~
群组选择器(',') /* 表示既h1,又h2 */ h1, h2 {color: red; } 后代选择器[空格] /* 表示 h1 下面的所有 span 元素,不管是否以 h1 为直接父元素 */ ...
过滤选择器——子元素过滤选择器
在页面开发过程中,常常遇到突出指定某行的需求.虽然使用基本过滤选择器:eq(index)可以实现单个表格的显示,但不能满足大量数据和多个表格的选择需求.为了实现这样的功能,jQuery中可以通过子元素 ...
html兄弟选择器怎么用,兄弟选择器 - 选择后面相邻的所有兄弟元素 - css3普通选择器...
兄弟选择器版本:CSS3 定义和用法E~F用于选择第一个元素之后所有的兄弟级的元素.只作用于同级元素. 这两个元素必须具有相同的父元素.F不必紧跟E. 语法:E~F{sRules} 选择E元素后面的 ...
相邻兄弟选择器和通用兄弟选择器的区别
两者的相同点都是:紧跟之后的元素相邻兄弟选择器:是选中元素后的第一个兄弟元素(必须为相邻) 语法为: div h2+h3{ color: red; } 通用兄弟选择器:是选中元素后的所有兄弟元素(不 ...
CSS基础知识（一）：选择器
文章目录前言一.CSS基础知识二.选择器 1.选择器 2.基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 通配符选择器 2.5 基础选择器总结 3.复合选择器 3. ...
Web 前端基础知识面试大全
目录一.HTML 1.对 HTML 语义化的理解 2.区别:src 和 href 3.DOCTYPE 的作用 4.HTML5 的新特性 5.script 标签中的 defer 和 async 6. ...
相邻兄弟选择器（+）、子选择器（）、兄弟选择器（~）等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(& ...

web CSS的知识- 关于后代选择器，子选择器，兄弟选择器的使用

web CSS的知识- 关于后代选择器，子选择器，兄弟选择器的使用相关推荐

最新文章

热门文章