一文带你学会CSS选择器

世界尽头与你

已于 2023-12-03 20:45:42 修改

阅读量889

点赞数 2

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

于 2022-09-29 17:51:35 首次发布

本文链接：https://blog.csdn.net/Gherbirthday0916/article/details/127111166

版权

前端专栏收录该内容

48 篇文章 10 订阅

订阅专栏

本文详细介绍了CSS选择器的使用，包括元素选择器、ID选择器、类选择器、后代选择器和群组选择器。通过实例展示了如何选择并应用样式到HTML元素上，帮助读者掌握CSS样式定位的基本技巧。文章强调了类选择器在减少重复代码中的重要性，并解释了后代选择器和群组选择器的功能，以便更精确地控制页面样式。

摘要由CSDN通过智能技术生成

1.概述

一个样式的语法由3部分组成，即选择器、属性和属性值

选择器，就是指用一种方式把你想要的那个元素选中。只有把它选中了，你才可以为这个元素添加CSS样式

2.元素选择器

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

在这里插入图片描述

实例：

<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        div {
            color: red;
        }
    </style>
</head>
<body>
<div>test</div>
<p>test</p>
<span>test</span>
<div>test</div>
</body>
</html>

所有div标签中的元素都被渲染为了红色：

在这里插入图片描述

3.id选择器

我们可以为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器。但要注意，在同一个页面中，是不允许出现两个相同的id的。这个与“没有两个人的身份证号相同”是一样的道理

在这里插入图片描述

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

示例：

<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <title></title>
    <style>
        #test {
            color: red;
        }
    </style>
</head>
<body>
<div id="test">test</div>
<div>test</div>
</body>
</html>

在这里插入图片描述

4.class选择器

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

在这里插入图片描述

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

演示：

<!DOCTYPE html>
<html lang="utf-8">
<head>
    <title></title>
    <style>
        .test {
            color: red;
        }
    </style>
</head>
<body>
<div>test</div>
<div class="test">test</div>
<div class="test">test</div>
</body>
</html>

在这里插入图片描述

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

5.后代选择器

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

在这里插入图片描述

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

<!DOCTYPE html>
<html lang="utf-8">
<head>
    <title></title>
    <style>
        #father1 div {
            color: red;
        }

        #father2 span {
            color: blue;
        }
    </style>
</head>
<body>
<div id="father1">
    <div>test</div>
    <div>test</div>
</div>
<div id="father2">
    <p>test2</p>
    <p>test2</p>
    <span>test2</span>
</div>
</body>
</html>

在这里插入图片描述

#father1 div {color:red;}表示选择“id为father1的元素”下的所有div元素，然后定义它们的文本颜色为红色

#father2 span{ color:blue;}表示选择“id为father2的元素”下的所有span元素，然后定义它们的文本颜色为蓝色

6.群组选择器

群组选择器，指的是同时对几个选择器进行相同的操作

在这里插入图片描述

对于群组选择器，两个选择器之间必须要用英文逗号（,）隔开，不然群组选择器就无法生效

实例：

<!DOCTYPE html>
<html lang="utf-8">
<head>
    <title></title>
    <style>
        h3, div, p, span {
            color: red;
        }
    </style>
</head>
<body>
<h3>test</h3>
<div>test</div>
<p>test</p>
<span>test</span>
</body>
</html>