CSS3-选择器，子代选择器 ">"、顺序选择器、下一个兄弟选择器、后面所有的兄弟选择器的用法

傷城~ 2023-08-17 16:42 22阅读 0赞

### 文章目录 ###

*   *   *   *   *  子代选择器
                 *  顺序选择器
                 *  下一个兄弟选择器
                 *  后面所有的兄弟选择器

##### 子代选择器 #####

子代选择器用 `>` 表示，只选择指定元素的子元素（儿子标签）；IE7开始兼容，IE6不兼容

div>p{ 
        color:red;
    }

div 标签的儿子（一级子标签） p 标签；和 div 标签的后代（当前元素下的所有子标签） p 标签截然不同

能够选择：

<div>
    	<p>我是div的儿子</p>
    </div>

不能选择：

<div>
        <ul>
            <li>
                <p>我是div的重孙子</p>
            </li>
        </ul>
    </div>

##### 顺序选择器 #####

*  `:first-child` 选择指定父元素中第一个子元素；first（第一个），child（孩子）
 *  `:last-child` 选择指定父元素中最后个子元素；last （末尾、最后）
 *  IE8开始兼容，IE6、7都不兼容

示例：

选择父级元素为 div 中的第一个后代元素 p：

div p:first-child{ 
        color: red;
        background: yellow;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]  
选择父级元素为 div 中的最后一个后代元素 p：

div p:last-child{ 
        color:blue;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]  
由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：

用类选择器来选择第一个或者最后一个：

ul li.first{ 
        color:red;
    }
    
    ul li.last{ 
    	color:blue;
    }

##### 下一个兄弟选择器 #####

`+` 表示选择下一个兄弟元素；选择指定的第一个元素之后紧跟的元素（兄弟元素）

IE7开始兼容，IE6不兼容

h3+p{ 
    	color:red;
    }

选择上的是h3元素后面紧挨着的第一个兄弟。

<h3>我是一个标题</h3>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <h3>我是一个标题</h3>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <h3>我是一个标题</h3>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <h3>我是一个标题</h3>
    <span>我是一个sapn标签</span>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]

##### 后面所有的兄弟选择器 #####

`~` 表示后面所有兄弟元素

选择 h1 标签后面所有兄弟元素 p 标签

h1~p { 
        background: yellow;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230809/80e0b7a9889c4f6aa19768cc503f3e8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: /images/20230809/5d6140d78d814c4c99bc3502d40da986.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]: /images/20230809/202595c0c1bb4d6ab164f616bee02214.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]: /images/20230809/5f9b79c87c7549aead92e342e0e2c6f2.png