CSS选择器是前端开发中用于控制页面样式匹配规则的核心工具，它的核心作用是精准定位HTML文档中的目标元素，从而将对应的CSS样式规则应用到这些元素上，实现页面的样式控制。
CSS选择器的核心作用
在没有CSS选择器的情况下，如果想要给页面中的某个段落调整文字颜色，可能需要给每个段落标签都添加行内样式，这种方式不仅繁琐，还不利于后期维护。而CSS选择器就可以解决这个问题，它相当于一个匹配规则，告诉浏览器哪些元素需要应用对应的样式。
比如我们想给页面中所有的段落元素设置文字颜色为灰色，只需要使用元素选择器匹配所有p标签，再编写对应的颜色样式即可，不需要逐个修改每个p标签的内容。
常见的CSS选择器类型
1. 基础选择器
- 元素选择器：通过HTML元素名称匹配元素，比如p选择器会匹配页面中所有的p标签。
- 类选择器：通过元素的class属性值匹配元素，以.开头，比如.text-red会匹配所有class包含text-red的元素。
- ID选择器：通过元素的id属性值匹配元素，以#开头，比如#header会匹配id为header的元素，id在页面中通常是唯一的。
- 通配符选择器：使用*匹配页面中的所有元素，一般用于重置默认样式。
2. 组合选择器
- 后代选择器：使用空格分隔两个选择器，比如div p会匹配所有在div元素内部的p元素，无论嵌套多少层。
- 子元素选择器：使用>分隔两个选择器，比如div>p只会匹配直接作为div子元素的p元素。
- 相邻兄弟选择器：使用+分隔两个选择器，比如h2+p会匹配紧跟在h2元素后面的第一个p元素。
3. 属性选择器
属性选择器可以根据元素的属性及属性值来匹配元素，比如input[type="text"]会匹配所有type属性为text的input元素。
CSS选择器使用示例
下面通过一个简单的代码示例来展示不同选择器的使用效果，首先是对应的HTML结构：
<div class="container">
<h2 id="title">CSS选择器示例</h2>
<p class="text">这是第一个段落</p>
<p>这是第二个段落</p>
<div>
<p>这是嵌套在div中的段落</p>
</div>
<input type="text" placeholder="请输入内容">
<input type="password" placeholder="请输入密码">
</div>
接下来是对应的CSS样式代码，使用不同的选择器匹配元素并应用样式：
/* 元素选择器：匹配所有p标签 */
p {
font-size: 14px;
}
/* 类选择器：匹配class为text的元素 */
.text {
color: #333;
}
/* ID选择器：匹配id为title的元素 */
#title {
color: #0066cc;
}
/* 后代选择器：匹配container内部所有的p标签 */
.container p {
line-height: 1.5;
}
/* 子元素选择器：匹配container的直接子元素p */
.container > p {
margin-bottom: 10px;
}
/* 属性选择器：匹配type为text的input元素 */
input[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}
CSS选择器的优先级规则
当多个选择器匹配到同一个元素，并且设置了冲突的样式时，就会按照优先级规则决定最终应用的样式。优先级从高到低大致为：内联样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器。如果优先级相同，那么后定义的样式会覆盖先定义的样式。
了解CSS选择器的作用和用法，能够帮助开发者更高效地编写CSS代码，减少冗余代码，也方便后续的样式维护和修改，是前端开发必备的基础技能之一。