CSS 选择器简介

本课程深入探讨使用级联样式表 (CSS) 增强 HTML 视觉效果。 我们将从 CSS 选择器开始——用于定位特定 HTML 元素的工具。

层叠样式表 (CSS)

CSS 规定了 HTML 组件的外观：颜色、间距、大小等等。虽然您可以使用内联 style 属性（例如 <p style="color:red;"></p>）来设置各个元素的样式，但这对于大型网站来说效率很低。

更有效的方法是在 HTML 的 <style></style> 部分中使用 元素，或者使用 style.css:<link> 链接到 HTML 的单独 CSS 文件（如

）

  <style>
    p {
      color: red;
      text-decoration: underline;
    }
  </style>

或

<!-- index.html -->
<link href="style.css" rel="stylesheet">

/* style.css */
p {
  color: red;
  text-decoration: underline;
}

这会将相同的样式应用于所有 <p></p> 元素。 浏览器开发人员工具（例如 Chrome 中的右键单击“检查”）可让您检查和修改应用的样式以进行故障排除。

选择 HTML 元素

p 中的 p { color: red; } 选择所有 <p></p> 元素。 对于更复杂的结构，id 和 class 属性提供更精细的控制。

类和 ID 选择器

每个元素可以有一个唯一的id。 ID 选择器 (#idName) 通过 id 定位元素。 但是，id 必须是唯一的，这限制了它们的灵活性。

课程提供了更多的多功能性。 多个元素可以共享同一个类。类选择器（.className）以该类为目标元素。 元素可以有多个类（例如，<p class="red-text bold"></p>）。

.red-text { color: red; } 使用 red-text 类设置所有元素的样式。 p.red-text 仅使用 <p></p>.red-text 专门设置

元素的样式

组合选择器

文档对象模型 (DOM) 将页面的结构表示为树。 组合选择器利用这个层次结构。

• div p：选择 <p></p> 元素（后代）中的所有 <div> 元素。 <li> <code>div > p：仅选择 <p></p> 元素的直接子 <div> 元素。 <li> <code>p span：选择紧随 <span></span> 后的 <p></p>。
• p ~ span：选择 <span></span> 之后的所有 <p></p> 兄弟姐妹。


不鼓励过于复杂的组合器组合。 您可以将它们与类选择器组合（例如，.intro p）。

伪选择器

伪类选择器根据元素的状态来设计元素的样式（例如，a:hover、a:active、a:visited）。 伪元素选择器针对元素的部分（例如，::first-letter）。

其他选择器

• *：通用选择器，选择所有元素。
• 组选择器（例如，h1, h2, p）：选择多个元素类型。
• 属性选择器（例如，p[lang]、p[lang="en"]）：根据属性选择元素。

进一步阅读：

• 响应式设计
• 响应式图片
• CSS 动画

这篇文章最初出现在 TheDevSpace。