HTML5中CSS3的相邻选择器、兄弟选择器以及not选择器

最新推荐文章于 2025-07-08 19:03:53 发布

枕梦

最新推荐文章于 2025-07-08 19:03:53 发布

阅读量6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML5+CSS 文章标签：相邻选择器兄弟选择器 not选择器

本文链接：https://blog.youkuaiyun.com/qq_37768482/article/details/71481221

HTML5+CSS 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了CSS中的几种常用选择器，包括相邻选择符和not选择器的使用方法，并通过实例展示了如何选择特定的HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

兄弟选择器：选择E元素后面的所有兄弟元素F。 （~）
相邻选择符：与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。 （+）
not选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*#li3 + li{
            color: red;
        }*/         
       /* #li3 ~ li{
            color: red;
        }*/         
        li:not(:last-child){    /*not选择器*/
            border-bottom: 1px solid red;
        }
    </style>
    <title>其他选择器</title>
</head>
<body>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li id="li3">列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
    <li>列表项7</li>
</ul>

</body>
</html>