什么是CSS选择器？CSS3中5种常见的基本选择器

在CSS（层叠样式表）的开发过程中，选择器是连接HTML文档和样式规则的核心桥梁。简单来说，CSS选择器就是一套规则，用来定位页面中需要添加样式的HTML元素，只有先通过选择器准确选中目标元素，才能将对应的样式属性应用到这些元素上，实现页面的视觉美化效果。

CSS3作为广泛使用的CSS版本，提供了多种类型的选择器，其中基本选择器是最基础、使用频率最高的类别，掌握它们是学习CSS样式编写的第一步。下面我们就来详细介绍CSS3中5种常见的基本选择器，结合代码示例帮助大家理解具体的使用方式。

一、元素选择器（标签选择器）

元素选择器也叫标签选择器，它直接使用HTML的标签名作为选择条件，会选中页面中所有对应该标签的元素，给它们统一应用样式。这种选择器适合给某一类标签设置全局统一的样式，比如给所有段落设置默认字体大小。

/* 选中所有p标签，设置字体大小为14px，行高1.5 */
p {
    font-size: 14px;
    line-height: 1.5;
}

/* 选中所有div标签，设置背景色为浅灰色 */
div {
    background-color: #f5f5f5;
}

二、ID选择器

ID选择器通过HTML元素的id属性来选中元素，它的语法是在id值前面加上#符号。需要注意的是，在同一个HTML文档中，id属性的值应该是唯一的，因此ID选择器通常用来选中页面中唯一的一个特定元素，比如页面的头部区域、底部版权区域等。

/* 选中id为header的元素，设置高度为60px，背景色为深蓝色 */
#header {
    height: 60px;
    background-color: #2c3e50;
    color: #ffffff;
}

对应的HTML元素写法如下：

<div id="header">这是页面头部区域</div>

三、类选择器

类选择器通过HTML元素的class属性来选中元素，语法是在class值前面加上.符号。和ID不同，class属性可以被多个元素同时使用，因此类选择器适合给具有相同特征的一类元素设置样式，比如给多个需要高亮显示的元素添加相同的类样式。

/* 选中所有class包含highlight的元素，设置文字颜色为红色，加粗 */
.highlight {
    color: #e74c3c;
    font-weight: bold;
}

/* 选中class同时包含box和rounded的元素，设置圆角和内边距 */
.box.rounded {
    border-radius: 8px;
    padding: 16px;
}

对应的HTML元素写法如下：

<p class="highlight">这段文字会高亮显示</p>
<div class="box rounded">这是一个带圆角的盒子</div>
<span class="highlight">这里的文字也会高亮</span>

四、通配符选择器

通配符选择器使用*符号表示，它会选中页面中的**所有元素**，通常会用这个选择器来重置一些默认的样式，比如清除所有元素的内外边距，避免不同浏览器默认样式带来的布局差异。

/* 选中页面所有元素，清除默认的内外边距，设置盒模型为border-box */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

需要注意的是，通配符选择器的优先级很低，而且会匹配所有元素，如果页面元素很多，可能会影响一点渲染性能，所以实际开发中不要过度使用。

五、属性选择器

属性选择器是通过HTML元素的属性及其属性值来选中元素，语法是用方括号包裹属性名或属性名加属性值。它可以选中带有指定属性的元素，或者属性值符合特定规则的元素，比如选中所有带有disabled属性的输入框，或者href属性以https开头的链接。

/* 选中所有带有disabled属性的input元素，设置背景色为浅灰色，文字颜色为#999 */
input[disabled] {
    background-color: #f0f0f0;
    color: #999;
    cursor: not-allowed;
}

/* 选中href属性以https://开头的a标签，在内容后面添加安全标识 */
a[href^="https://"]::after {
    content: "（安全链接）";
    font-size: 12px;
    color: #27ae60;
}

/* 选中type属性为text的input元素，设置边框样式 */
input[type="text"] {
    border: 1px solid #ddd;
    padding: 6px 10px;
    border-radius: 4px;
}

对应的HTML元素写法如下：

<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
<input type="text" disabled placeholder="禁用的输入框">
<a href="https://www.ipipp.com">访问示例网站</a>

基本选择器优先级说明

当多个选择器同时作用于同一个元素时，会按照优先级规则应用样式，5种基本选择器的优先级从高到低排列为：ID选择器 > 类选择器 > 属性选择器 > 元素选择器 > 通配符选择器。如果优先级相同，那么后面定义的样式会覆盖前面定义的样式。

可以通过下表更清晰地查看优先级对比：

掌握这5种基本选择器的用法和优先级规则，就可以应对大部分基础的CSS样式编写需求，后续学习更复杂的选择器时也会更加轻松。

CSS选择器CSS3基本选择器元素选择器ID选择器类选择器