剑侠盟·网游特攻队

CSS 选择器

CSS 选择器是网页设计中用于精确定位HTML元素并应用样式的关键工具。它就像在建房子时（like building a house）精确地知道哪间房要粉刷哪种颜色，或者在整理图书馆（organizing library）时明确哪一类书需要贴标签。通过使用选择器，开发者可以在作品集网站、博客、电子商务网站、新闻网站和社交平台中高效地控制样式，例如仅高亮热门文章标题、为价格标注特殊颜色或为导航按钮添加特效。

学习CSS 选择器的重要性在于，它能帮助你减少重复样式定义，提高代码可维护性，让页面在视觉上更有层次感。掌握选择器后，你可以精准锁定任何元素，无论是单个元素、某类元素还是嵌套在复杂结构中的元素。本参考内容将带你了解常见的选择器类型、用法和最佳实践，并通过实际示例帮助你快速上手。

在完成本教程后，你将能够在项目中灵活使用选择器，从而像写信（writing letters）时准确填写收件人一样，将样式精准地“送达”给目标元素。

基础示例

css

CSS Code

📋 复制

🚀 在线试试

/* Change the color of a paragraph with a specific ID */

\#intro {

color: blue; /* Text becomes blue */

font-weight: bold; /* Make text bold */

}

/* Select all h2 headings */

h2 {

color: green; /* Make all h2 headings green */

}

在这个基础示例中，我们使用了两种常见的CSS 选择器。

第一行 #intro 是ID选择器（ID Selector），用于选择具有特定id属性的元素。语法是使用#加id名称，例如HTML中

欢迎访问

会被选中，文字会变为蓝色并加粗。ID选择器适用于页面中唯一的元素，例如作品集网站首页欢迎词或博客顶部横幅。

第二个选择器 h2 是元素选择器（Element Selector），用于选中页面中所有的

标题。示例中所有的二级标题都会变成绿色，这在新闻网站中可用于统一突出栏目标题。

初学者常见疑问是：“如果两个元素都有相同ID会怎样？”答案是HTML规范要求ID唯一，如果重复会导致选择器行为不可预测。因此ID应用于唯一元素，而重复元素应使用类选择器（Class Selector）。

通过这个示例，我们理解了CSS 选择器的基本逻辑：找到目标元素并为其应用样式。掌握这种选择能力可以让你在任何项目中精准控制页面外观。

实用示例

css

CSS Code

📋 复制

🚀 在线试试

/* Highlight breaking news links in a news site */

.news-section a.breaking {

color: red; /* Make breaking news links red */

text-decoration: underline; /* Add underline */

}

/* Highlight product price in e-commerce */

.product-card .price {

color: orange; /* Orange for price */

font-weight: bold; /* Make price prominent */

}

/* Style social platform follow button */

header nav a.follow-btn {

background-color: #0077cc; /* Blue background */

color: white;

padding: 6px 12px;

border-radius: 4px;

}

这个实用示例展示了选择器在真实场景中的组合应用。

第一个 .news-section a.breaking 是复合选择器，包含了类选择器和元素选择器的组合。它选择所有在class="news-section"的元素中，带有class="breaking"的链接。这样可以在新闻网站中只高亮突发新闻，而不影响其他普通链接。

第二个 .product-card .price 是后代选择器（Descendant Selector），选择所有在产品卡片product-card中的价格price元素。在电子商务网站中，这能精确控制商品价格样式，而不会影响页面上其他数字。

第三个 header nav a.follow-btn 使用了嵌套的元素和类选择器，选择位于

中的导航