相邻元素选择器

最新推荐文章于 2024-05-06 17:11:44 发布

赤焰狂魔&莫小贝

最新推荐文章于 2024-05-06 17:11:44 发布

阅读量139

点赞数

分类专栏： html css3 文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_38945490/article/details/128840296

版权

html css3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

相邻元素选择器
+ 选择器 匹配当前元素紧跟其后的那个元素
~ 选择器 匹配当前元素之后的所有匹配元素

 .fele+li{
            color: red;
          }
 .fele~li{
            color: blue;
           }

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>内嵌样式</title>
    <style>
        /*找当前fele元素紧邻的li元素*/
        .fele+li{
            color: red;
        }
        /*找当前fele元素之后的所有li元素*/
        .fele~li{
            color: blue;
        }
    </style>
</head>
<body>
<button>按钮</button>
<button class="btn">按钮</button>
<button id="btnstart">按钮</button>
<button class="btn">按钮</button>
<button>按钮</button>

<ul>
    <li class="fele">学科</li>
    <p>p标签</p>
    <li>语文</li>
    <li>数学</li>
    <li>物理</li>
    <li>化学</li>
</ul>
</body>
</html>