相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）等用法

2019年9月13日 119次阅读来源: cdgogo

前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用法。

相邻兄弟选择器（+）

相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。
器。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相邻兄弟选择器</title>
    <style type="text/css">
        h1+p{
            color:red;
        }
    </style>
</head>
 
<body>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <h1>Hello word!</h1>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
</body>
</html>

效果图如下：

《相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）等用法》” /></span></p><p>兄弟只会影响下面的p标签的样式，不影响上面兄弟的样式。 <br /><strong>注意这里的’+’的意义跟’and’意义不一样，兄弟选择器的样式是应用在兄弟元素上，跟参照的元素样式无关</strong>，如上例只影响p元素的样式，而不影响h1标签的样式。 <br />当然这个也会循环查找，即当两个兄弟元素相同时，会再一次循环查找： <br />　　示例：</p><pre><code><style type=

《相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）等用法》” /></span></p><p>可以看出第一个li字体颜色没有变红，第二个和第三个元素字体变红，这就是因为第三个li是第二个li的兄弟元素，所以也会应用样式。</p><h2>兄弟选择器（~）</h2><p>作用是查找某一个指定元素的<strong>后面的所有兄弟结点</strong>。 <br />示例代码：</p><pre><code><style type=

效果展示：
http://www.w3school.com.cn/cs…

扩展

    原文作者：cdgogo
    原文地址: https://segmentfault.com/a/1190000016563980
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。