可线上
时间：2025年2月28-3月2日
目录
前言
CSS选择器是Web开发中的重要组成部分，它决定了样式规则如何应用到页面中的元素。掌握常见的CSS选择器，不仅能提升开发效率，还能让代码更加简洁和高效。在这篇博客中，我们将详细解析CSS的基本选择器，包括类型选择器、类选择器、ID选择器、通配选择器等，同时给出使用时的注意事项，帮助你更好地理解和运用这些选择器。
一、基本选择器简介
CSS选择器的作用是选择页面中的元素，然后将样式应用于它们。根据选择器的不同，CSS可以精确地定位到你想要操作的元素。常见的选择器包括元素选择器、类选择器、ID选择器、通配符选择器等。
1. 元素选择器（Type Selector）
元素选择器是最基本的CSS选择器，用于选择某种类型的HTML元素并为其应用样式。你只需要写出元素的标签名称即可。
基本语法
element {
property: value;
}
示例
p {
color: blue;
}
这段代码将使页面中所有<p>标签的文字变为蓝色。
注意事项
- 选择范围广泛：会影响页面中所有的相同元素。如果只想选择某一部分，可以结合其他选择器使用。
- 优先级较低：在样式冲突时，元素选择器的优先级较低，可能会被类或ID选择器覆盖。
综合案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素选择器</title>
<style>
h2{
color:aquamarine;
font-size: 30px;
}
p{
color:blue;
font-size: 25px;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<br>
<h2>土味情话</h2>
<h3>作者:网友</h3>
<p>万水千山总是情，爱我多点行不行?</p>
<p>我的心里给你留了块地，我的死心塌地！</p>
<br>
<h2>反杀土味情话</h2>
<h3>作者:单身网友</h3>
<p>一寸光阴一村金，劝你死了这条心.</p>
<p>我心里只有一块地，我的玛莎拉蒂!</p>
</body>
</html> 
2. 类选择器（Class Selector）
类选择器是通过HTML元素的class属性来选中元素，它允许你选择页面中所有具有特定类的元素。类选择器以.开头。
基本语法
.class-name {
property: value;
}
示例
.button {
background-color: red;
color: white;
}
这段代码会使页面中所有类名为button的元素背景变为红色，文字变为白色。
注意事项
- 类名复用：同一个类可以被多个元素使用，非常适合对多种元素应用相同的样式。
- 命名规范：为了避免命名冲突，建议采用有意义且易于辨识的类名，例如
button-primary、header-title等。
综合案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配选择器</title>
<style>
/* 类选择器 选中类名为speak的元素 */
.speak{
color: red;
}
/* 类选择器 选中类名为answer的元素 */
.answer{
color: blue;
}
/* 类选择器 选中类名为size的元素 */
.size{
font-size: 35px;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<br>
<h2>土味情话</h2>
<h3>作者:网友</h3>
<p class="speak size">你对我说:万水千山总是情，爱我多点行不行?</p>
<p class="speak">你对我说:我的心里给你留了块地，我的死心塌地！</p>
<br>
<h2>反杀土味情话</h2>
<h3>作者:单身网友</h3>
<p class="answer">我对你说:一寸光阴一村金，劝你死了这条心.</p>
<p class="answer">我对你说:我心里只有一块地，我的玛莎拉蒂!</p>
</body>
</html>
3. ID选择器（ID Selector）
ID选择器是通过HTML元素的id属性来选中元素，ID在页面中必须是唯一的。ID选择器以#开头，适合用于选择页面中唯一的元素。
基本语法
#id-name {
property: value;
}
示例
#header {
font-size: 24px;
color: black;
}
这段代码会使页面中id="header"的元素字体大小为24px，颜色为黑色。
注意事项
- ID唯一性：一个页面中只能有一个
id为同名的元素。如果多个元素使用相同的ID，可能会导致样式和脚本的错误。 - 优先级较高：ID选择器的优先级比类选择器和元素选择器都要高，因此它会覆盖相同元素的其他样式。
综合案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器</title>
<style>
#earthy{
color:aquamarine;
}
.size{
font-size: 30px;
}
#unearthy{
color:blue;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<br>
<h2 id="earthy" class="size">土味情话</h2>
<h3>作者:网友</h3>
<p>万水千山总是情，爱我多点行不行?</p>
<p>我的心里给你留了块地，我的死心塌地！</p>
<br>
<h2 id="unearthy" class="size">反杀土味情话</h2>
<h3>作者:单身网友</h3>
<p>一寸光阴一村金，劝你死了这条心.</p>
<p>我心里只有一块地，我的玛莎拉蒂!</p>
</body>
</html> 
4. 通配符选择器（Universal Selector）
通配符选择器（*）用于选中页面中的所有元素。它的应用范围非常广泛，但不常用于样式设计中，通常用于全局的基础样式设置。
基本语法
* {
property: value;
}
示例
* {
margin: 0;
padding: 0;
}
这段代码会清除页面中所有元素的外边距和内边距，通常用于网页布局的初始化。
注意事项
- 慎用通配符选择器：由于它会影响页面上的所有元素，使用时要非常小心，避免造成不可预见的副作用。
- 性能问题：通配符选择器的性能相对较差，因为它会作用于所有元素，可能导致页面渲染变慢。
综合案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配选择器</title>
<style>
*{
color: red;
font-size: 35px;
}
</style>
</head>
<body>
<h1>欢迎来到土味官网，土的味道我知道</h1>
<br>
<h2>土味情话</h2>
<h3>作者:网友</h3>
<p>万水千山总是情，爱我多点行不行?</p>
<p>我的心里给你留了块地，我的死心塌地！</p>
<br>
<h2>反杀土味情话</h2>
<h3>作者:单身网友</h3>
<p>一寸光阴一村金，劝你死了这条心.</p>
<p>我心里只有一块地，我的玛莎拉蒂!</p>
</body>
</html>
二、CSS选择器的注意事项
1. 优先级与特异性
选择器的优先级（即特异性）会影响样式的应用。ID选择器的优先级最高，其次是类选择器，最后是元素选择器。
- ID选择器：
#id（特异性为100） - 类选择器：
.class（特异性为10） - 元素选择器：
div（特异性为1）
2. 避免过度使用通配符选择器
虽然通配符选择器可以快速选择所有元素，但由于它会影响页面上的所有内容，可能会导致不必要的性能开销。因此应避免在生产环境中大量使用。
3. 合理组合选择器
使用组合选择器时，尽量避免过度嵌套，保持代码简洁且高效。嵌套过深的选择器可能会影响页面的性能，并导致样式难以维护。
三、总结
CSS选择器是Web开发中不可或缺的基础，掌握了选择器的使用，就能够精确地控制页面中每个元素的样式。从简单的元素选择器到复杂的组合选择器，合理运用这些选择器能让你写出更加简洁、高效的CSS代码。在实际项目中，了解选择器的优先级、特异性，以及如何避免选择器过度嵌套，能帮助避免样式冲突，提高开发效率。
希望这篇博客帮助更好地理解和使用CSS选择器，助力你成为一个更加高效的Web开发者！