跳到主要内容

CSS 选择器

CSS选择器是CSS中用于选择HTML元素并为其应用样式的一种机制。通过选择器，我们可以精确地定位页面中的元素，并为其设置颜色、字体、布局等样式。理解CSS选择器是掌握CSS的关键一步。

什么是CSS选择器？​

CSS选择器是一种模式，用于匹配HTML文档中的元素。通过选择器，我们可以指定哪些元素应该应用特定的样式规则。选择器可以是简单的（如标签名），也可以是复杂的（如组合选择器）。

基本选择器​

1. 元素选择器​

元素选择器是最简单的选择器，它通过HTML元素的标签名来选择元素。

css
p {
  color: blue;
}

输入：

html
<p>这是一个段落。</p>

输出：

这是一个段落。

2. 类选择器​

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

css
.highlight {
  background-color: yellow;
}

输入：

html
<p class="highlight">这是一个高亮段落。</p>

输出：

这是一个高亮段落。

3. ID选择器​

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

css
#header {
  font-size: 24px;
}

输入：

html
<h1 id="header">这是标题</h1>

输出：

这是标题

备注

ID选择器在页面中应该是唯一的，即一个页面中不应有多个元素使用相同的ID。

组合选择器​

1. 后代选择器​

后代选择器用于选择某个元素的后代元素。它通过空格分隔两个选择器。

css
div p {
  color: green;
}

输入：

html
<div>
  <p>这是一个段落。</p>
</div>

输出：

这是一个段落。

2. 子元素选择器​

子元素选择器用于选择某个元素的直接子元素。它使用>符号。

css
ul > li {
  list-style-type: square;
}

输入：

html
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>

输出：

  • 项目1
  • 项目2

3. 相邻兄弟选择器​

相邻兄弟选择器用于选择紧接在另一个元素后的元素。它使用+符号。

css
h1 + p {
  font-weight: bold;
}

输入：

html
<h1>标题</h1>
<p>这是一个段落。</p>

输出：

标题

这是一个段落。

4. 通用兄弟选择器​

通用兄弟选择器用于选择某个元素之后的所有兄弟元素。它使用~符号。

css
h1 ~ p {
  color: red;
}

输入：

html
<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>

输出：

标题

段落1

段落2

属性选择器​

属性选择器通过元素的属性来选择元素。

1. 存在属性选择器​

选择具有指定属性的元素。

css
a[target] {
  color: purple;
}

输入：

html
<a href="#" target="_blank">链接</a>

输出： 链接

2. 属性值选择器​

选择具有指定属性值的元素。

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

输入：

html
<input type="text" placeholder="输入文本">

输出：

伪类选择器​

伪类选择器用于选择元素的特定状态。

1. :hover​

选择鼠标悬停时的元素。

css
a:hover {
  color: orange;
}

输入：

html
<a href="#">悬停链接</a>

输出： 悬停链接

2. :nth-child​

选择某个父元素下的第n个子元素。

css
li:nth-child(2) {
  color: green;
}

输入：

html
<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

输出：

  • 项目1
  • 项目2
  • 项目3

实际应用案例​

1. 导航栏样式​

css
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
}

nav ul li a:hover {
  color: #007BFF;
}

输入：

html
<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

输出：

2. 表格样式​

css
table {
  width: 100%;
  border-collapse: collapse;
}

table th, table td {
  border: 1px solid #ddd;
  padding: 8px;
}

table tr:nth-child(even) {
  background-color: #f2f2f2;
}

table tr:hover {
  background-color: #ddd;
}

输入：

html
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

输出：

姓名年龄
张三25
李四30

总结​

CSS选择器是CSS中非常重要的一部分，它允许我们精确地选择HTML元素并为其应用样式。通过掌握各种选择器，我们可以更灵活地控制页面的外观和布局。

附加资源​

练习​

  1. 创建一个包含多个段落的HTML页面，并使用类选择器为某些段落设置不同的背景颜色。
  2. 使用伪类选择器:hover为链接添加悬停效果。
  3. 使用属性选择器为所有带有target="_blank"属性的链接设置特定的样式。

通过练习，你将更好地理解CSS选择器的应用。