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>
<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>
复制代码

 

即，无论你在哪里，我都要选中你，因为你是我的后代。

 

经常看见css的后代选择器是这样的写法：

div.class   和 .class div 的形式两者的区别：

div.class  是选中的类名为class 的div元素，与直接使用类选择器.class不同，因为可能有其他的元素使用了class类名，比如<p class=""></p>,就不会被div.class选中；

.class div 是后代选择器的一种，表示选中 类名为class的元素包含的所有的div元素；

 

 

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被选中。

 

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selector</title>
    <style>
        ul>li>em {
            color: red;
            font-weight: bold;
        }
        h1+p{
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li><em>List item 1</em> 
            <ol>
                <li>List item 1-1</li>
                <li><em>List item 1-2</em></li>
                <li>List item 1-3</li>
            </ol>
        </li>
        <li>
            <em>List item 2</em> 
        </li>
        <li>
            List item 3
        </li>
    </ul>
    <h1>H1</h1>
    <p>param</p>
    <h2>H2</h2>
</body>
</html>

 

 

posted @ 2020-07-16 00:01  Ryan_zheng  阅读(1512)  评论(0)  编辑  收藏  举报