标签：CSS3 color 标签 id CSS 选择器 类名
文章目录
前言
复习CSS语法的基础选择器部分，为小程序开发做好准备
一、CSS选择器
在CSS中，存在着能够对页面标签进行选择，从而进行针对被选中标签进行样式修改的选择器。
选择器分为基础选择器和复合选择器两个大类，此篇复习的是基础选择器。
以下根据对基础选择器的分类介绍：标签选择器、类选择器、id选择器、通配符选择器。
二、基础选择器
1.标签选择器
标签选择器，顾名思义，就是通过选中某个标签群体进行修改，如常见的div、span、li等常见标签；
语法格式为
标签名 {
标签样式
}
代码如下（示例）：
<!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: aqua;
}
div {
color: yellow;
}
</style>
</head>
<body>
<p>你好</p>
<p>我也好</p>
<p>大家都好</p>
<div>昨天</div>
<div>今天</div>
<div>明天</div>
</body>
</html>
显示结果：
2.类选择器
当想要差异化选择不同的标签时，单独选一个或者某几个标签，可以选用
类选择器；
类选择器在HTML中以class属性进行表示，在CSS选择器中，类选择器以"."号进行显示.
类选择器分为两个大类：单类名选择器和多类名选择器
单类名选择器语法格式为
.类名 {
相关样式
}
<tag class='类名'></tag>
多类名选择器语法格式为
.类名A .类名B {
相关样式
}
<tag class='类名A 类名B'></tag>
多类名使用的注意事项：
1.在标签class属性中写多个类名
2.多个类名中间必须用空格分开
3.这个标签就可以分别具有这些类名的样式
多类名开发使用场景：
1.可以把一些标签元素相同的样式（共同部分）放到一个类里面
2.这个标签都可以调用这个共同的类，再调用自己独有的类
3.节省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>Document</title>
<style>
.box{
width: 900px;
height: 900px;
background-color: black;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="box">我是普通盒子啊</div>
<div class="box red">我是多类名选中的红盒子啊</div>
<div class="box green">我是多类名选中绿盒子啊</div>
</body>
</html>
效果如下：
3.id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素可以以id属性来设置id选择器，CSS中id选择器以"#"来定义
id选择器语法格式为
#id名 {
相关样式
}
<tag id='id名'></tag>
代码如下（示例）：
<!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>
#redBox {
background-color: red;
}
#greenBox {
background-color: green;
}
</style>
</head>
<body>
<div id="redBox">我是红盒子啊</div>
<div id="greenBox">我是绿盒子啊</div>
</body>
</html>
效果如下：
id选择器的特点在于其唯一性，一般搭配Javascript进行使用
4.通配符选择器
在CSS中，通配符选择器使用"*"定义，它表示选取页面中所有元素（标签）
语法
* {
相关样式
}
这个就不放代码案例了，因为比较简单，简单来说这个选择器就是修改所有的标签属性。
总结
复习CSS，做好项目，冲冲冲！
标签：CSS3,color,标签,id,CSS,选择器,类名 来源： https://blog.csdn.net/qjyws/article/details/119350243
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。