CSS基础选择器

最新推荐文章于 2024-05-06 10:59:29 发布

来自万古的忧伤

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量165

点赞数

分类专栏：前端文章标签： css 前端 html 选择器

本文链接：https://blog.csdn.net/weixin_45413603/article/details/124757213

版权

前端专栏收录该内容

49 篇文章 5 订阅

订阅专栏

1 CSS选择器的作用

选择器就是根据不同的需求把不同的标签选出来，这就是选择器的作用，简单来说，就是：选择标签用的。

h1 {
	color: red;
	font-size: 25px;
}

以上 CSS 做了两件事：

找到所有的 h1 标签。（选对人）
设置这些标签的样式：颜色为红色、字体大小为 25 像素。（做对事）

2 选择器的分类

选择器分为 基础选择器 和 复合选择器 两个大类，本文首先介绍一下基础选择器。

基础选择器是由 单个 选择器组成的
基础选择器又包括：标签选择器、类选择器、id 选择器、通配符选择器

3 标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

语法：

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

作用：

标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。

优点：

能快速为页面中同类型的标签统一设置样式。

缺点：

不能设计差异化样式，只能选择全部的当前标签。

<!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>基础选择器之标签选择器</title>
    <style type="text/css">
        /* 会对所有的该标签元素运用样式，优点：快速统一，缺点：无法差异化设置 */
        p {
            color: green;
        }

        div {
            color: pink;
        }
    </style>
</head>

<body>
    <p>男</p>
    <p>男</p>
    <p>男</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>

</html>

4 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用 类选择器 。

CSS 语法：

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

例如：将所有拥有 red 类的 HTML 元素均设置为红色。

.red {
	color: red;
}

HTML 语法：

<div class="red">变红色</div>

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个 . 号显示。

注意：

类选择器使用 .（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）
可以理解为给这个标签起了一个别名来表示
长名称或词组可以使用中横线 - 来为类命名
不能使用已有的关键字作为类名
不要使用纯数字、中文等命名，尽量使用英文字母来表示
命名要有意义，尽量使别人一眼就知道这个类名的目的（可读性第一，长度第二，推荐使用英语，如果是使用拼音请使用全拼）
命名规范：见附件（Web前端开发规范手册.pdf）

记忆口诀：样式点定义，结构类调用，一个或多个，开发最常用。

<!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>基础选择器之类选择器</title>
    <style type="text/css">
        /* 类选择器口诀：样式 . 定义，结构 class 调用，一个或多个，开发最常用 */
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>

</html>

类选择器——多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签，简单理解就是一个标签有多个名字。

在标签 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>基础选择器之类选择器</title>
    <style type="text/css">
        /* 一个标签可以运用多个类选择器，之间用空格隔开 */
        .red {
            color: red;
        }

        .font35 {
            font-size: 35px;
        }
    </style>
</head>

<body>
    <div class="red font35">zhoujirui</div>
</body>

</html>

多类名开发中使用场景

可以把一些标签元素相同的样式（共同的部分）放到一个类里面
这些标签都可以调用这个公共的类，然后再调用自己独有的类
从而节省 CSS 代码，统一修改也非常方便（模块化、可重用化）

<!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>基础选择器之类选择器</title>
    <style type="text/css">
        /* 类选择器最大的优势在于：复用 */
        .box {
            width: 100px;
            height: 100px;
        }

        .red {
            background-color: red;
        }

        .green {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>

</html>

多类名选择器在后期布局比较复杂的情况下，是使用得较多的。

5 id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 # 来定义。

语法：

#id名 {
	属性1: 属性值1;
	...
}

例如：将 id 为 nav 元素中的内容设置为红色。

#nav {
	color: red;
}

注意： id 属性只能在每个 HTML 文档中出现一次。

口诀： 样式 # 定义，结构 id 调用，只能调用一次，别人切勿使用。

id 选择器和类选择器的区别：

类选择器 (class) 好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
id 选择器好比人的身份证号码，全中国是唯一的，不可重复（同一个 id 选择器只能调用一次）
id 选择器和类选择器最大的不同在于使用次数上
类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

<!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>基础选择器之id选择器</title>
    <style type="text/css">
        /* id 选择器口诀：样式 # 定义，结构 id 调用，只能调用一次，别人切勿使用 */
        #pink {
            color: pink;
        }
    </style>
</head>

<body>
    <div id="pink">test</div>
</body>

</html>

再次强调：同一 id 只能定义一次，同一 id 选择器也只能调用一次！（对于 CSS 修改样式来说，最好使用类选择器，id 选择器主要与后面的 JS 搭配使用）。

6 通配符选择器

在 CSS 中，通配符选择器使用 * 定义，它表示选取页面中所有元素（标签）。

语法：

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

通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景

// 利用通配符选择器清除所有的元素标签的内外边距，后期讲
* {
	margin: 0;
	padding: 0;
}

<!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>基础选择器之通配符选择器</title>
    <style type="text/css">
        /* * 给 html 标签所有的元素都使用样式，并且这个过程是自动完成的，不需要手动调用 */
        * {
            color: red;
        }
    </style>
</head>

<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>

</html>

7 基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如：p	不能差异化选择	较多	`p {color: red;}`
类选择器	可以选出 1 个或者多个标签	可以根据需求选择	非常多	`.nav {color: red;}`
id 选择器	一次只能选择 1 个标签	ID 属性只能在每个 HTML 文档中出现一次，也只能调用一次	一般和 js 搭配	`#nav {color: red;}`
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	`* {color: red;}`

每个基础选择器都有使用场景，都需要掌握
如果是修改样式，类选择器是使用最多的

来自万古的忧伤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础选择器

1 CSS选择器的作用选择器就是根据不同的需求把不同的标签选出来，这就是选择器的作用，简单来说，就是：选择标签用的。h1 { color: red; font-size: 25px;}以上 CSS 做了两件事：找到所有的 h1 标签。（选对人）设置这些标签的样式：颜色为红色、字体大小为 25 像素。（做对事）2 选择器的分类选择器分为基础选择器和复合选择器两个大类，本文首先介绍一下基础选择器。基础选择器是由单个选择器组成的基础选择器又包括：标签选择器、类选择器、i
复制链接

扫一扫