在网页设计与前端开发中，CSS（层叠样式表）是控制网页外观和布局的核心技术之一。而CSS选择器则是连接HTML结构与样式规则的桥梁。掌握常用的选择器，尤其是CSS3中新增的强大选择器，对于提高开发效率、实现更灵活的样式控制至关重要。本文将系统讲解七种基本的CSS选择器，并深入介绍CSS3中新增的多种高级选择器，帮助开发者提升对网页样式的掌控能力。
一、七种基本的CSS选择器在学习CSS之初，掌握以下七种基础选择器是理解样式应用逻辑的关键。
元素选择器（Type Selector）
直接通过HTML标签名称选择元素。例如：
p {
color: blue;
}该规则会将页面中所有
段落文字设置为蓝色。
类选择器（Class Selector）
通过类名选择元素，使用点号（.）表示。例如：
.highlight {
background-color: yellow;
}所有带有 class="highlight" 的元素都会应用该样式。
ID选择器（ID Selector）
通过唯一的ID选择元素，使用井号（#）表示。例如：
#header {
font-size: 24px;
}ID选择器具有最高优先级，且每个ID在页面中应唯一使用。
通用选择器（Universal Selector）
使用星号（*）匹配页面中所有元素。例如：
* {
margin: 0;
padding: 0;
}常用于重置默认样式，但使用时需谨慎，避免性能问题。
属性选择器（Attribute Selector）
通过HTML元素的属性进行选择。例如：
input[type="text"] {
border: 1px solid #ccc;
}该规则仅作用于 类型为文本框的元素。
后代选择器（Descendant Selector）
通过空格分隔多个选择器，表示嵌套关系。例如：
div p {
color: green;
}表示选择所有位于
元素。
子元素选择器（Child Selector）
使用大于号（>）表示直接子元素关系。例如：
ul > li {
list-style: none;
}仅作用于
- 的直接子元素
- ，不包括嵌套更深的
- 。
二、CSS3新增的常用选择器随着CSS3的推出，选择器的功能得到了极大的扩展，开发者可以更精准地定位页面元素，实现更复杂的样式控制。
伪类选择器（Pseudo-class Selectors）
CSS3新增了许多伪类选择器，如 :nth-child()、:first-of-type、:last-of-type 等，可以按位置、奇偶行等条件选择元素。例如：
tr:nth-child(even) {
background-color: #f2f2f2;
}上述代码将表格中偶数行背景设置为灰色。
属性选择器增强
CSS3扩展了属性选择器的功能，支持部分匹配，如：
^= 表示以某字符串开头：
a[href^="https://"] {
color: red;
}$= 表示以某字符串结尾：
img[src$=".png"] {
border: 1px solid #000;
}*= 表示包含某字符串：
div[class*="box"] {
padding: 10px;
}结构性伪类选择器
如 :root、:not()、:empty 等，用于选择特定结构的元素。例如：
:not(.active) {
display: none;
}表示所有不带有 active 类的元素将被隐藏。
UI元素状态伪类选择器
用于根据用户交互状态选择元素，如 :hover、:focus、:checked 等。例如：
input:focus {
border-color: blue;
}当输入框获得焦点时，边框颜色变为蓝色。
目标伪类选择器（:target）
用于匹配当前URL锚点所指向的元素。例如：
:target {
background-color: yellow;
}当页面地址为 #section1 时，对应ID为 section1 的元素会被高亮显示。
否定伪类选择器（:not()）
可以排除某些元素，例如：
p:not(.intro) {
font-weight: bold;
}所有不带 intro 类的段落将加粗显示。
语言伪类选择器（:lang()）
用于根据语言属性选择元素，例如：
q:lang(fr) {
quotes: '«' '»';
}当
元素的语言设置为法语时，使用法语引号。
CSS选择器是构建网页样式体系的基础工具，掌握其使用方法对于前端开发者至关重要。从基本的元素、类、ID选择器到CSS3新增的多种高级选择器，每一种都为开发者提供了更强大、更灵活的样式控制能力。
声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com