CSS标签选择器的用法（附带实例）

标签选择器也叫作元素选择器。简单来说，是通过 HTML 文档中的标签名作为选择器来使用的。

标签选择器的使用十分简单，只需将 HTML 标签写在选择器位置，就可以告诉浏览器已经选中了该标签。以 <p> 标签为例，语法格式如下：

p {
  属性1: 属性值1;
  属性2: 属性值2;
  ...
  属性n: 属性值n;
}

该标签包含的三个常见属性，分别如下所示：

color 属性：用来设置标签中字体的颜色；
background-color 属性：用来设置标签的背景颜色；
font-size 属性：用来设置标签内文字的大小，单位是 px，像素的缩写。

例如，可以使用 <p>、<h3> 或者 <a> 标签，甚至可以使用 <html> 标签来作为选择器的名字，示例代码如下：

复制纯文本复制

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <style>
    p {
      font-size: 30px;
    }
    h3 {
      font-size: 40px;
    }
    a {
      font-size: 50px;
    }
    html {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>这是一个 p 标签</p>
  <h3>这是一个 h 标签</h3>
  <a href="#">这是一个 a 标签</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <style>
    p {
      font-size: 30px;
    }
    h3 {
      font-size: 40px;
    }
    a {
      font-size: 50px;
    }
    html {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>这是一个 p 标签</p>
  <h3>这是一个 h 标签</h3>
  <a href="#">这是一个 a 标签</a>
</body>
</html>

运行代码，效果如下图所示：

图 1 测试标签选择器

对于一些特有标签，浏览器已经对其设置了初始样式。使用标签选择器可以覆盖浏览器自带的样式。

比如浏览器对 <h3> 标签默认设置了大小，我们可以使用标签选择器来覆盖浏览器自带的字号大小，设置 <h3> 标签的初始字号。示例代码如下：

复制纯文本复制

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <style>
    h3 {
      font-size: 40px;
    }
  </style>
</head>
<body>
  <h3>这是第一个 h3 标签</h3>
  <p>这是第一个段落</p>
  <h3>这是第二个 h3 标签</h3>
  <p>这是第二个段落</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <style>
    h3 {
      font-size: 40px;
    }
  </style>
</head>
<body>
  <h3>这是第一个 h3 标签</h3>
  <p>这是第一个段落</p>
  <h3>这是第二个 h3 标签</h3>
  <p>这是第二个段落</p>
</body>
</html>

代码中使用标签选择器为 <h3> 标签设置了字号为 40px，覆盖了浏览器自带的字号。

运行代码查看效果，如下图所示：

图 2 使用标签选择器为<h3>标签设置了字号为40px

CSS标签选择器的用法（附带实例）

相关文章