CSS | 有效的选择器

CSS 选择器是用来定位 HTML 元素的工具，有效的选择器可以让我们更简单、快速的修改页面上的样式，提升开发效率。本文将介绍一些有效的选择器，希望对你的工作有所帮助。

元素选择器

元素选择器是最基础的选择器，用来选择页面上的 HTML 元素。只需使用 HTML 元素的名称即可对其应用样式。

p {
  color: red;
}

上面的代码将会适用于网页上所有的 <p> 标签，将文本颜色设置为红色。

类选择器

类选择器是通过元素的 class 属性来选择元素，以 . 开头。

.red-text {
  color: red;
}

上面的代码定义了一个 .red-text 的类选择器，当 HTML 元素的 class 属性包含 red-text 时，文本颜色将会变成红色。

<p class="red-text">我是红色的文本。</p>

ID选择器

ID 选择器是通过元素的 id 属性来选择元素，以 # 开头。

#logo {
  width: 100px;
  height: 100px;
}

上面的代码定义了一个 #logo 的 ID 选择器，将应用于 id="logo" 的 HTML 元素。

<img src="logo.png" id="logo" />

属性选择器

属性选择器允许选择包含特定属性的 HTML 元素，以 [attribute] 的形式定义。

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

上面的代码定义了一个属性选择器，将应用于 <input> 标签中，type 属性值为 text 的元素。

<input type="text" />

后代选择器

后代选择器匹配元素的后代元素，以 空格 分隔。

.container p {
  font-size: 16px;
}

上面的代码将应用于所有在 .container 元素内的 <p> 标签，将文本大小设置为 16px。

<div class="container">
  <p>我是一个段落。</p>
</div>

子元素选择器

子元素选择器匹配元素的直接子元素，以 > 分隔。

ul > li {
  list-style: none;
}

上面的代码将应用于 ul 元素下的所有 <li>，将列表样式设置为无。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

相邻兄弟选择器

相邻兄弟选择器匹配紧接在指定元素后面的兄弟元素，以 + 分隔。

h2 + p {
  font-weight: bold;
}

上面的代码将应用于在 h2 元素后面的第一个 <p> 标签，将文本加粗。

<h2>标题</h2>
<p>文本1</p>
<p>文本2</p>

伪类选择器

伪类选择器是用来匹配元素的特定状态或位置。

a:hover {
  color: red;
}

上面的代码将应用于鼠标悬停在 a 标签上时，将文本颜色设置为红色。

<a href="#">链接</a>

以上是一些常见的有效选择器，希望可以对你的 CSS 编写有所帮助。如果你想了解更多选择器，请查看 MDN 的官方文档。