CSS后代选择器、⼦元素选择器、相邻兄弟选择器区别与详解派⽣选择器⽤的很多，派⽣选择器具体包括为后代选择器、⼦元素选择器、相邻兄弟选择器，我们来理解⼀下他们之间的具体⽤法与区别。
1、css后代选择器
语法：h1 em {color:red;} 表⽰的是从h1开始⾥⾯包含的所有的em元素变成红⾊，h1为祖先，其他的em都是后代，即选中后代，不管是⼉⼦还是孙⼦，只要是都会被选中，为后代选择器。
例如
<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}
</style>
</head>
<body>
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
css兄弟选择器
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
运⾏结果：
即，⽆论你在哪⾥，我都要选中你，因为你是我的后代。
2、css⼦元素选择器
语法：h1>em{color:red;} 表⽰的是从h1开始⾥⾯的第⼀层em元素变成红⾊，h1为祖先，em为⼉⼦，就像世袭制⼀样，只能传给⼉⼦，孙⼦和其他堂亲都不⾏，例如
<style type="text/css">
h1 > strong {color:red;}
</style>
<h1>This is <strong>very</strong><strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
运⾏结果：
只有第⼀个h1会变⾊。
3、相邻兄弟选择器
语法：h1 + p {margin-top:50px;} 表⽰是“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的⽗元素”这是官⽅的说法，理解的误区在于这个加号，h1和p并不是同时被选中的，⽽是选择的是h1紧跟着后⾯的p元素，是递进的关系，例如：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {color:red;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
</html>
运⾏的结果是这样的：
li+li选择的是第⼆个li，同理也可以理解成紧跟着第⼆个li的兄弟，即是第三个li，当然是在同⼀个级别下。所以出现第⼆、三li被选中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。