什么是选择器
浏览 721
课文
CSS 选择器可以帮助我们选择元素，毕竟如何我们要对某些元素进行样式的修改，首先就是要定位到这些元素才能说去作修改。而 选择器就是帮我们来从中选择这些元素的一种规范 。
打个比方，就像我们要区分人群一样，我们可以根据性别区分，汉族壮族之类的民族作区分，还可以通过打标签的方式区分，甚至通过唯一的身份证号来定位人员。
常见的选择器
类型选择器
顾名思义，就是根据元素的类型来选择元素，就像我们根据民族来区分人群一样。
**应用场景：**由于会影响到页面的所有同类型的元素，影响范围很大，所以我们通常会用来修改比较统一的一些样式。比如从设计上来说，一个网站的文本最好使用同一个字体，文本的间距保持一致，所有的页面最好使用同样的背景色（很多网站的背景其实不是纯白色，为了保证阅读的舒适度多采用偏微暖的白色，文本也不是纯黑色而是偏灰），这些样式就应该通过类型选择器来设置。
**写法：**直接写元素类型，比如 p { color: red; } ，就是把所有 p 元素的文本设为红色。
看实例，敏锐的同学应该发现了，我们之前的例子都是使用的类型选择器。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<h3>同学名单</h3>
<p>鸣人</p>
<p>柯南</p>
<p>王路飞</p>
</body>
</html>
类选择器
类选择器就是通过设置元素的 class 属性，将元素区分为不同的类别，在设置 CSS 样式时就可以针对某个类别设置样式。就像疫情期间，老实呆家里的就被打上安全的标签（类别），设置你的样式（健康码）为绿码，去过中高风险地区的就被打上危险的标签，设置你的样式（健康码）为红码。
**应用场景：**类选择器是最常用的选择器了，在网站中针对不同的按钮不同的文本等等都会事先分好类，比如错误警告的文本用红色，就会事先定义个 .danger { color: red; } ，之后所有的警告文本设置 class="danger" 即可。
写法： . + 类名 ， 比如 .danger { color: red; } 就是设置所有类名为 danger 的元素文本为红色。
看实例。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.male {
color: blue;
}
.female {
color: red;
}
</style>
</head>
<body>
<h3>同学名单</h3>
<p class="male">鸣人</p>
<p class="male">柯南</p>
<p class="female">春野樱</p>
</body>
</html>
ID 选择器
ID 选择器与类选择器的区别在于，它是 唯一的 ，就像身份证号一样。
当然 ID 重复了通常也能正常运行，但为了规范考虑千万别重复！
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mingren {
color: red;
}
#kenan {
color: green;
}
#xiaoying {
color: blue;
}
</style>
</head>
<body>
<h3>同学名单</h3>
<p id="mingren">鸣人</p>
<p id="kenan">柯南</p>
<p id="xiaoying">春野樱</p>
</body>
</html>
评论
暂无评论