CSS 选择器大全

最新推荐文章于 2025-09-15 17:26:16 发布

原创

最新推荐文章于 2025-09-15 17:26:16 发布 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #选择器 #css3选择器

本文详细介绍了CSS选择器的各类用法，包括通配符选择器、元素选择器、ID选择器、类选择器、并集选择器、交集选择器、直接子元素选择器、后代元素选择器、兄弟元素选择器、伪类选择器、伪元素选择器、属性选择器以及否定伪类，帮助读者全面理解CSS选择器的使用。

CSS 选择器

CSS 选择器有很多，总结几个常用的选择器，如果想了解更多选择器请点击我查看或者如果英文好得情况下点击我查看也是可以的哦~

通配符选择器
元素选择器
ID选择器
类选择器
并集选择器(选择器分组)
交集选择器
子元素选择器
后代元素选择器
兄弟元素选择器
伪类选择器
子元素的伪类
伪元素选择器
属性选择器
否定伪类

通配符选择器

* 可以选中所有的元素

<style>
    * {
    
    
        color: deeppink;
    }
</style>

<body>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
</body>

运行结果

元素选择器

元素就是标签，可以直接使用标签的名称来选择页面中的元素。

<style>
    a {
    
    
        color: deepskyblue;
    }
</style>

<body>
    <p>我是一个段落</p>
    <a href="#">我是一个a标签</a>
    <p>我是一个段落</p>
    <a href="#">我是一个a标签</a>
    <p>我是一个段落</p>
</body>

运行结果

ID 选择器

通过元素的#id来选中符合条件的元素，同一个页面中，id值不能重复。

<style>
    #p1 {
    
    
        color: greenyellow;
    }
</style>

<body>
    <p>我是一个段落</p>
    <a href="#">我是一个a标签</a>
    <p id="p1">看我的样式不一样哦~</p>
    <a href="#">我是一个a标签</a>
    <p>我是一个段落</p>
</body>

运行结果

类选择器

可以为元素设置 class 属性，class 属性和 id 类似，但是class可以重复。
拥有相同class属性值的元素称为一组。
还可以为同一个元素设置多个class 属性值，属性值之间用空格分隔。

<style>
    .p1 {
    
    
        color: deepskyblue;
    }

    .test {
    
    
        font-size: 20px;
    }
</style>

<body>
    <p class="p1">我的样式比较好看</p>
    <p class="p1">我的样式比较好看</p>
    <p class="p1">我的样式比较好看</p>
    <p class="p1 test">与众不同</p>
    <p>我么有样式