第二章——CSS基础选择器，标签选择器，类选择器， id 选择器，通配符选择器

最新推荐文章于 2024-05-20 18:40:16 发布

耶耶LCY

最新推荐文章于 2024-05-20 18:40:16 发布

阅读量1.9k

点赞数 3

分类专栏： # CSS 前端文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_63676550/article/details/128775345

版权

前端同时被 2 个专栏收录

8 篇文章 3 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

文章目录

2.1 CSS选择器的作用

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

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

以上 CSS 做了两件事：

找到所有的 h1 标签。选择器（选对人）。
设置这些标签的样式，比如颜色为红色（做对事）。

2.2 CSS选择器分类

基础选择器：是由单个选择器组成的
复合选择器：

2.3 CSS 基础选择器分类

标签选择器
类选择器
id 选择器
通配符选择器

2.4 标签选择器

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

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

说明：
- 作用标签选择器可以把某一类标签全部选择出来，比如所有的标签和所有的标签。
- 优点：能快速为页面中同类型的标签统一设置样式。
- 缺点：不能设计差异化样式，只能选择全部的当前标签

2.5 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
语法(被选中的标签需要有class属性)

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

代码示例

<head>
    <style>
        .blue{ color:blue}
    </style>
</head>
<body>
    <div class='blue'>这是一个div标签</div>
</body>
</html>

在这里插入图片描述

2.5.1 多类名选择

多类名使用方式

<div class="red font20">亚瑟</div>

在标签class 属性中写多个类名
多个类名中间必须用空格分开
这个标签就可以分别具有这些类名的样式

多类名开发中使用场景

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

2.6 id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。

语法：

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

示例

<head>
    <style>
        #blue{ color:blueviolet}//将id属性为blue的标签设为紫色
    </style>
</head>
<body>
    <div id='blue'>这是一个div标签</div>
</body>

2.7 id选择器与类选择器的区别‘

① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。

③ id 选择器和类选择器最大的不同在于使用次数上。

④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

2.8 通配符选择器

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

语法：

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

通配符选择器不需要调用，自动就给所有的元素使用样式

代码示例：

* {
 margin: 0;//检索或设置对象四边的外延边距
 padding: 0;//检索或设置对象四边的内部边距
}

2.9 选择器对比

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