CSS基础笔记——CSS选择器

最新推荐文章于 2024-03-31 09:47:26 发布

Kll .

最新推荐文章于 2024-03-31 09:47:26 发布

阅读量179

点赞数

分类专栏：前端学习笔记

本文链接：https://blog.youkuaiyun.com/qq_48894948/article/details/118896183

版权

前端学习笔记专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了CSS中最常用的选择器类型，包括元素选择器、ID选择器、类选择器、后代选择器和群组选择器。通过实例展示了如何使用这些选择器来定位和样式化网页元素，帮助读者更好地理解和应用CSS选择器进行网页样式设计。

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

CSS的选择器非常多，这里介绍讲解最实用的五种选择器：元素选择器、id选择器、class选择器、后代选择器、群组选择器

元素选择器

元素选择器，就是选择相同的元素，然后对相同的元素定义同一个CSS样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>元素选择器</title>
        <style type="text/css">
            div{color: skyblue;}
        </style>
    </head>
    <body>
        <div>元素选择器</div>
        <p>元素选择器</p>
    </body>
</html>

div{color：skyblue；}表示把页面中所有的div元素选中，然后定义它们的文本颜色

id选择器

我们可以为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，就是id选择器。但要注意同一个页面中，不允许出现两个相同的id

对于id选择器，id名前面必须要加上前缀#，否则该选择器无法生效

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>元素选择器</title>
        <style type="text/css">
            #kll{color: skyblue;}
        </style>
    </head>
    <body>
        <div>id选择器</div>
        <div id="kll">id选择器</div>
        <div>id选择器</div>
    </body>
</html>

#kll{color:skyblue;}表示选中id=kll的元素，然后定义它们的文本颜色

class选择器

class选择器，也就是类选择器，我们可以对相同的元素或者不同的元素定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作

class名前必须要加上前缀英文句号.，否则该选择器无法生效

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>class选择器</title>
        <style type="text/css">
            .class{color: skyblue;}
        </style>
    </head>
    <body>
        <div class="class">class选择器</div>
        <div>class选择器</div>
        <div class="class">class选择器</div>
    </body>
</html>

.class{color:skyblue;}表示选中class=class的所有元素，然后定义它们的文本颜色

这个页面有三个div，我们可以为第一个和第三个div设置同一个class，这样可以同时操作它们的css样式，而不同的元素也能定义相同的class

如果要为两个或多个元素定义相同的样式，建议使用class选择器，这样可以减少大量重复代码

后代选择器

后代选择器，就是选择元素内部中某一种元素的所有元素：包括子元素和其他后代元素

父元素和后代元素必须要用空格隔开，表示选中某个元素内部的后代元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>后代选择器</title>
        <style type="text/css">
            #father1 div{color: skyblue;}
        </style>
    </head>
    <body>
        <div id="father1">
            <div>后代选择器</div>
            <div>后代选择器</div>
            <span>后代选择器</span>
        </div>
        <div id="father2">
            <div>后代选择器</div>
            <div>后代选择器</div>
        </div>
    </body>
</html>

#father1 div{color:skyblue;}表示选择id为father1的元素下的所有div元素并定义它们的颜色

群组选择器

群组选择器，指的是同时对几个选择器进行相同的操作，对于群组选择器，两个选择器之前必须要用英文逗号,隔开，不然群组选择器就无法生效

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>群组选择器</title>
        <style type="text/css">
            h3,div,span{color: skyblue;}
        </style>
    </head>
    <body>
        <h3>群组选择器</h3>
        <div>群组选择器</div>
        <p>群组选择器</p>
        <span>群组选择器</span>
    </body>
</html>