1、前端笔记-CSS-样式选择器

原创已于 2022-11-23 16:51:05 修改 · 277 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2022-11-23 16:35:32 首次发布

前端-css 专栏收录该内容

35 篇文章

订阅专栏

本文详细介绍了CSS中的四种基础选择器：标签选择器、类选择器、ID选择器和通配符选择器，并通过实例展示了它们的基本用法及区别。同时，还介绍了如何使用复合选择器来组合多种选择器。

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

CSS选择器的作用，就是用来选择标签用的

1.选择器的分类：

基础选择器和复合选择器

2.基础选择器：

单个选择器：分为标签选择器、类选择器、id选择器、通配符选择器

2.1 标签选择器

就是用HTML标签名称作为选择器，为页面中某一类标签指定统一的CSS样式，不能进行差异化样式渲染。

标签名 {
	属性1: 属性值1;
	属性2: 属性值2;
}

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: green;
        }
        div {
            color: pink;
        }
    </style>
</head>
<body>
    <p>这是一个绿色的段落p</p>
    <div>这是一个粉红色的块级元素div</div>
</body>
</html>

在这里插入图片描述

2.2 类选择器

可以单独选一个或几个标签，差异化进行元素样式的渲染，。
在标签中利用class属性

1. 类选择器-单类名

.类名 {
	属性1: 属性值1;
	属性2: 属性值2;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">红色的</li>
        <li class="red">红色的</li>
        <li class="green">绿色的</li>
        <li>不加颜色的</li>
    </ul>
</body>
</html>

在这里插入图片描述

2. 类选择器-多类名

使用方式：
（1）在标签的class属性中写多个类名，用空格分开
使用场景和好处：
降低耦合度，减少代码量，将公共的样式提取到统一的class中，方便后期统一维护和修改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
        .size {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red size">红色的</li>
        <li class="red li">红色的</li>
        <li class="green">绿色的</li>
        <li>不加颜色的</li>
    </ul>
    

</body>
</html>

在这里插入图片描述

2.3 id选择器

使用标签的id属性进行样式渲染
class和id进行样式渲染的区别：
（1）定义：id-#,class-.
（2）使用规范：同一个id只能被标签调用一次（一般用在页面唯一性元素上，实际可以被调用多次，但这里说的说规范情况），如果已经有一个标签定义了id=“red”，其他标签就不能在定义id="red"了（像身份证），class可以被多个标签调用（像名字可以重复）
(3)

#id名称 {
	属性1: 属性值1;
	属性2: 属性值2;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="a">aaa</div>
    <div>bbb</div>
</body>
</html>

在这里插入图片描述

2.4 通配符选择器

*：表示选取页面中所有的标签元素
不需要在标签元素中调用
特殊情况使用：如清除所有元素标签的内外边距

* {
	margin: 0;
	padding: 0;
}

语法：

* {
  属性1: 属性值1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>111</li>
    </ul>
    <table>
        <tr>
            <td>sss</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

3.复合选择器：

将多个基础选择器组合使用。如：body .nav{属性1：属性值1}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div #red{
            color: red;
        }
        div .red {
            color: green;
        }
    </style>
</head>
<body>
    <div>
        <p id="red">这是红色</p>
        <p class="red">这是绿色</p>
    </div>
    <span id="red">这是红色</span>
</body>
</html>

在这里插入图片描述