学习

标签选择器

2026-02-23/0/ 编辑

标签选择器

什么是标签选择器

标签选择器(也称为元素选择器)使用 HTML 标签名作为选择器,选择所有匹配该标签名的元素。

语法

标签名 {
  属性名1: 属性值1;
  属性名2: 属性值2;
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>标签选择器</title>
  <style>
    h1 {
      color: rebeccapurple;
      font-family: "Courier New", Courier, monospace;
      font-size: small;
    }

    p {
      color: #333;
      font-size: 14px;
    }

    div {
      background-color: #f0f0f0;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>标题1</h1>
  <p>段落1</p>
  <p>段落2</p>
  <div>盒子1</div>
  <div>盒子2</div>
</body>
</html>

常用标签选择器

选择器	选中元素	示例
`div`	所有 `<div>` 元素	`div { color: red; }`
`p`	所有 `<p>` 元素	`p { font-size: 14px; }`
`h1`	所有 `<h1>` 元素	`h1 { color: blue; }`
`a`	所有 `<a>` 元素	`a { text-decoration: none; }`
`span`	所有 `<span>` 元素	`span { color: red; }`
`img`	所有 `<img>` 元素	`img { display: block; }`
`ul`	所有 `<ul>` 元素	`ul { list-style: none; }`
`li`	所有 `<li>` 元素	`li { margin: 5px 0; }`

特点

1. 选择所有匹配的元素

标签选择器会选择页面上所有匹配该标签名的元素。

<style>
  p {
    color: red;  /* 所有 p 标签都会变成红色 */
  }
</style>
<body>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <p>第三个段落</p>
</body>

2. 优先级较低

标签选择器的优先级较低,容易被其他选择器覆盖。

<style>
  p {
    color: red;  /* 被覆盖 */
  }

  .text-blue {
    color: blue;  /* 生效,优先级更高 */
  }
</style>
<body>
  <p class="text-blue">蓝色文字</p>
</body>

实际应用

应用1: 全局样式重置

/* 去掉默认样式 */
body, h1, h2, h3, p, ul, ol {
  margin: 0;
  padding: 0;
}

应用2: 统一链接样式

/* 去掉链接下划线 */
a {
  text-decoration: none;
  color: #007bff;
}

应用3: 列表样式

/* 去掉列表默认样式 */
ul {
  list-style: none;
  padding-left: 0;
}

ol {
  padding-left: 20px;
}

应用4: 图片默认样式

/* 图片默认块级元素 */
img {
  display: block;
  max-width: 100%;
}

应用5: 表单元素

/* 统一输入框样式 */
input, textarea, select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

组合使用

1. 多个标签选择器

/* 同时选择多个标签 */
h1, h2, h3 {
  color: #333;
  font-weight: bold;
}

div, p, span {
  margin: 10px 0;
}

2. 标签选择器 + 伪类

/* 链接悬停效果 */
a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* 输入框获得焦点 */
input:focus {
  border-color: #007bff;
  outline: none;
}

3. 标签选择器 + 伪元素

/* 段落首字母 */
p::first-letter {
  font-size: 24px;
  font-weight: bold;
}

/* 段落第一行 */
p::first-line {
  color: red;
}

优缺点

优点

简单直观: 语法简单,易于理解
全局生效: 统一设置同一标签的样式
代码简洁: 不需要添加类名或ID

缺点

缺乏特异性: 无法区分不同的元素
优先级低: 容易被其他选择器覆盖
不灵活: 无法选择特定位置的元素

最佳实践

1. 用于全局样式

/* 适合设置全局默认样式 */
body {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

2. 结合类选择器使用

/* 全局默认样式 */
a {
  color: #007bff;
  text-decoration: none;
}

/* 特殊链接 */
a.special {
  color: #ff0000;
}

3. 避免过度使用

/* 不推荐: 可能影响不需要的元素 */
div {
  padding: 10px;
}

/* 推荐: 使用类选择器 */
.card {
  padding: 10px;
}

注意事项

1. 影响范围广

标签选择器会影响页面上所有匹配的标签,要注意意外影响。

/* 小心: 可能影响不需要的 div */
div {
  border: 1px solid #ddd;
}

2. 优先级问题

标签选择器优先级最低,容易被覆盖。

<style>
  p {
    color: red;  /* 被覆盖 */
  }

  #id-selector {
    color: blue;  /* 生效 */
  }
</style>
<p id="id-selector">文字</p>

3. HTML5 语义化标签

HTML5 提供了许多语义化标签,可以使用标签选择器统一样式。

/* 语义化标签 */
header, nav, article, section, footer {
  margin: 0;
  padding: 0;
}

article {
  padding: 20px;
}

footer {
  background-color: #333;
  color: #fff;
}

学习要点

语法: 标签名 { 属性: 值; }
特点: 选择所有匹配的标签
优点: 简单、统一、全局
缺点: 缺乏特异性、优先级低
适用: 全局样式重置、统一默认样式
建议: 结合类选择器使用,避免过度使用

css css学习