CSS常用选择器

写在前面

大家好，我是一溪风月🤖，在前端开发领域，CSS（层叠样式表）是塑造网页视觉与交互效果的核心技术，而CSS选择器则是精准定位并美化网页元素的关键工具。接下来，我们将深入剖析各类常见的CSS选择器，助力大家掌握前端样式设计的精髓。

一.CSS选择器基础概念

前端开发中，为使网页呈现预期样式，常需针对特定元素进行设置，这就依赖于CSS选择器。CSS选择器依据特定规则筛选符合条件的元素，进而为其添加样式。其类型丰富，涵盖通用选择器、元素选择器、类选择器、id选择器、属性选择器、组合选择器、伪类选择器以及伪元素选择器。每种选择器都有独特用途，适用于不同场景。

二.简单选择器：样式构建的基础

（一）通用选择器

通用选择器用*表示，能选中页面所有元素。它常用于统一设置元素的基础样式，如重置内外边距，确保页面在不同浏览器中的显示一致性。但因其会匹配全部元素，可能影响性能，使用时需谨慎。示例代码如下：

css 复制代码

* {
  margin: 0;
  padding: 0;
}

这段代码将所有元素的外边距和内边距设为0，有效消除浏览器默认边距差异，让页面布局更规整。

（二）元素选择器

元素选择器直接以HTML元素标签名作为选择依据，会选中页面中所有该类型元素。例如，要让页面所有段落文本变红，代码如下：

css 复制代码

p {
  color: red;
}

元素选择器简单直接，能快速为同类元素设置相同样式，但缺乏对特定元素的精准定位能力。若只想为某个段落设置样式，它就无法满足需求。

（三）类选择器

类选择器以.开头，后跟类名。只要元素的class属性包含该类名，就会应用相应样式。一个元素可拥有多个类名，这为灵活设置元素样式提供了极大便利。比如，为突出显示的元素添加highlight类并设置样式：

css 复制代码

.highlight {
  background-color: yellow;
  color: blue;
}

在HTML中，给元素添加highlight类，即可让其呈现黄色背景和蓝色文本的样式：

css 复制代码

<div class="highlight">这是一个被突出显示的div元素</div>

（四）id选择器

id选择器使用"#"加唯一id名定义。在HTML文档里，id值必须唯一，不可重复。id值若由多个单词组成，可用中划线（-）、下划线（_）连接，或采用驼峰标识，但应避免使用标签名作为id值。当需要为特定元素设置独特样式时，id选择器就发挥重要作用。例如：

css 复制代码

#main-content {
  width: 80%;
  margin: 0 auto;
}

在HTML中，为相应元素添加"main-content"的id：

css 复制代码

<div id="main-content">这是页面的主要内容区域</div>

三.属性选择器：基于属性筛选元素

属性选择器依据元素的属性及属性值筛选目标元素，提供了更精细的选择条件。

基本属性选择器 ：[attribute]用于选择具有指定属性的元素[attribute=value]则选择属性值等于指定值的元素。比如，选择所有有title属性的元素并添加边框：

css 复制代码

[title] {
  border: 1px solid black;
}

选择type属性值为"text"的输入框并设置宽度：

css 复制代码

[type="text"] {
  width: 200px;
}

拓展属性选择器 ：[attribute*=value]表示属性值包含指定值；[attribute^=value]表示属性值以指定值开头；[attribute$=value]表示属性值以指定值结尾；[attribute|=value]表示属性值等于指定值或以指定值开头并紧跟连接符-；[attribute~=value]表示属性值包含指定值，且其他值与指定值用空格分隔。这些拓展属性选择器虽日常使用频率较低，但在特定场景下非常实用。例如，为所有以https开头的链接设置绿色文本：

css 复制代码

[href^="https"] {
  color: green;
}

四.组合选择器：精准定位元素关系

（一）后代选择器

后代选择器通过空格连接两个选择器，可选中指定祖先元素的所有后代元素（包括直接和间接后代）。例如，让class为"box"的元素内部所有<span>元素文字变红，代码如下：

css 复制代码

.box span {
  color: red;
}

假设HTML结构如下：

css 复制代码

<div class="box">
  <div>
    <span>哈哈哈</span>
  </div>
  <span>呵呵呵</span>
</div>

上述代码会使哈哈哈和呵呵呵这两个<span>元素文字都变为红色。

（二）子代选择器

子代选择器用">"连接，仅选择指定父元素的直接子元素，筛选条件更严格。例如，仅让class为"box"的直接子元素<span>文字变红：

css 复制代码

.box > span {
  color: red;
}

在上述HTML结构中，只有"呵呵呵"所在的直接子元素<span>文字会变红，"哈哈哈"所在的<span>因不是"box"的直接子元素而不受影响。

（三）兄弟选择器

相邻兄弟选择器 ：用"+"连接，选择指定元素的下一个相邻兄弟元素。例如，让紧跟在<h2>元素后的<p>元素字体变斜体：

css 复制代码

h2 + p {
  font-style: italic;
}

假设HTML代码如下：

css 复制代码

<h2>标题</h2>
<p>这是紧跟在标题后的段落，字体将变为斜体</p>
<p>这是另一个段落，不受影响</p>

通用兄弟选择器 ：通过"~"连接，选择指定元素之后的所有兄弟元素。比如，让<h3>元素之后的所有<div>元素背景变浅灰色：

css 复制代码

h3 ~ div {
  background-color: lightgray;
}

（四）选择器组

交集选择器 ：两个选择器紧密相连，元素需同时满足两个选择器条件才会被选中。例如，选择class为"one"的<div>元素并设置样式：

css 复制代码

div.one {
  color: red;
}

并集选择器 ：选择器之间用逗号分隔，元素符合其中一个选择器条件即可被选中。常用于为多个不同元素设置相同样式，比如统一<h1>、<h2>、<h3>标题元素的字体：

css 复制代码

h1, h2, h3 {
  font-family: Arial;
}

五.伪类与伪元素选择器：增添特殊样式与交互效果

（一）伪类选择器

伪类选择器用于选择处于特定状态的元素，为实现网页交互效果提供支持。

动态伪类 ：:link表示未访问链接，:visited表示已访问链接，:hover用于鼠标悬停元素时，:active表示元素被激活（如鼠标点击未松开），:focus表示元素获得焦点（可接收键盘输入）。使用动态伪类时要注意顺序，:hover需在:link和:visited之后，:active需在:hover之后，建议编写顺序为:link、:visited、:focus、:hover、:active。示例代码如下：

css 复制代码

a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  color: red;
}
a:active {
  color: orange;
}
input:focus {
  border: 2px solid blue;
}

其他伪类 ：:target用于选择当前活动的目标元素，:nth-child(n)和:nth-of-type(n)等结构伪类可根据元素在父元素中的位置进行选择。例如，让奇数行列表项背景为浅蓝色：

css 复制代码

li:nth-child(odd) {
  background-color: lightblue;
}

（二）伪元素选择器

伪元素选择器用于在元素特定位置插入内容或设置样式，常见的有::first-line、::first-letter、::before、::after。

::before和::after：常结合content属性使用，在元素内容前后插入额外内容。比如，在段落前添加">> "，段落之后添加" <<"：

css 复制代码

p::before {
  content: ">> ";
}
p::after {
  content: " <<";
}

::first-line和::first-letter：::first-line用于设置元素第一行样式，::first-letter用于设置元素首字母样式。例如，让段落首字母变大、首行文本加粗：

css 复制代码

p::first-letter {
  font-size: 24px;
}
p::first-line {
  font-weight: bold;
}

六.总结

这篇文章到这里就结束了🔚，CSS选择器是前端开发的关键组成部分，每种选择器都有其独特的功能与适用场景。简单选择器奠定了样式设置的基础，元素选择器方便快捷地对一类元素进行操作，类选择器灵活分组样式，id选择器精准定位单个特殊元素。属性选择器基于元素属性筛选，让样式设置更加精细。组合选择器通过不同符号巧妙定位元素关系，满足复杂布局需求。伪类和伪元素选择器为网页增添交互效果和特殊样式，提升用户体验。

在实际开发中，需根据具体设计需求灵活组合运用这些选择器。有时单一选择器就能解决问题，而复杂页面布局可能需要多个选择器协同工作。同时，要注意选择器的性能问题，避免过度使用影响性能的选择器。希望大家通过持续学习与实践，熟练掌握CSS选择器的使用技巧，在前端开发中创造出更出色的网页效果。