七种基本的CSS选择器 CSS3新增了哪些选择器

在网页设计与前端开发中，CSS（层叠样式表）是控制网页外观和布局的核心技术之一。而CSS选择器则是连接HTML结构与样式规则的桥梁。掌握常用的选择器，尤其是CSS3中新增的强大选择器，对于提高开发效率、实现更灵活的样式控制至关重要。本文将系统讲解七种基本的CSS选择器，并深入介绍CSS3中新增的多种高级选择器，帮助开发者提升对网页样式的掌控能力。

一、七种基本的CSS选择器

在学习CSS之初，掌握以下七种基础选择器是理解样式应用逻辑的关键。

1. 元素选择器（Type Selector）

直接通过HTML标签名称选择元素。例如：

p {
  color: blue;
}

该规则会将页面中所有 <p> 段落文字设置为蓝色。

1. 类选择器（Class Selector）

通过类名选择元素，使用点号（.）表示。例如：

.highlight {
  background-color: yellow;
}

所有带有 class="highlight" 的元素都会应用该样式。

1. ID选择器（ID Selector）

通过唯一的ID选择元素，使用井号（#）表示。例如：

#header {
  font-size: 24px;
}

ID选择器具有最高优先级，且每个ID在页面中应唯一使用。

1. 通用选择器（Universal Selector）

使用星号（*）匹配页面中所有元素。例如：

* {
  margin: 0;
  padding: 0;
}

常用于重置默认样式，但使用时需谨慎，避免性能问题。

1. 属性选择器（Attribute Selector）

通过HTML元素的属性进行选择。例如：

input[type="text"] {
  border: 1px solid #ccc;
}

该规则仅作用于 <input> 类型为文本框的元素。

1. 后代选择器（Descendant Selector）

通过空格分隔多个选择器，表示嵌套关系。例如：

div p {
  color: green;
}

表示选择所有位于 <div> 元素内部的 <p> 元素。

1. 子元素选择器（Child Selector）

使用大于号（>）表示直接子元素关系。例如：

ul > li {
  list-style: none;
}

仅作用于 <ul> 的直接子元素 <li>，不包括嵌套更深的 <li>。

二、CSS3新增的常用选择器

随着CSS3的推出，选择器的功能得到了极大的扩展，开发者可以更精准地定位页面元素，实现更复杂的样式控制。

1. 伪类选择器（Pseudo-class Selectors）

CSS3新增了许多伪类选择器，如 :nth-child()、:first-of-type、:last-of-type 等，可以按位置、奇偶行等条件选择元素。例如：

tr:nth-child(even) {
  background-color: #f2f2f2;
}

上述代码将表格中偶数行背景设置为灰色。

1. 属性选择器增强

CSS3扩展了属性选择器的功能，支持部分匹配，如：

^= 表示以某字符串开头：

a[href^="https://"] {
  color: red;
}

$= 表示以某字符串结尾：

img[src$=".png"] {
  border: 1px solid #000;
}

*= 表示包含某字符串：

div[class*="box"] {
  padding: 10px;
}

1. 结构性伪类选择器

如 :root、:not()、:empty 等，用于选择特定结构的元素。例如：

:not(.active) {
  display: none;
}

表示所有不带有 active 类的元素将被隐藏。

1. UI元素状态伪类选择器

用于根据用户交互状态选择元素，如 :hover、:focus、:checked 等。例如：

input:focus {
  border-color: blue;
}

当输入框获得焦点时，边框颜色变为蓝色。

1. 目标伪类选择器（:target）

用于匹配当前URL锚点所指向的元素。例如：

:target {
  background-color: yellow;
}

当页面地址为 #section1 时，对应ID为 section1 的元素会被高亮显示。

1. 否定伪类选择器（:not()）

可以排除某些元素，例如：

p:not(.intro) {
  font-weight: bold;
}

所有不带 intro 类的段落将加粗显示。

1. 语言伪类选择器（:lang()）

用于根据语言属性选择元素，例如：

q:lang(fr) {
  quotes: '«' '»';
}

当 <q> 元素的语言设置为法语时，使用法语引号。

CSS选择器是构建网页样式体系的基础工具，掌握其使用方法对于前端开发者至关重要。从基本的元素、类、ID选择器到CSS3新增的多种高级选择器，每一种都为开发者提供了更强大、更灵活的样式控制能力。

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com