首页 > 编程笔记 > CSS笔记 阅读:14

CSS标签选择器的用法(附带实例)

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

标签选择器的使用十分简单,只需将 HTML 标签写在选择器位置,就可以告诉浏览器已经选中了该标签。以 <p> 标签为例,语法格式如下:
p {
  属性1: 属性值1;
  属性2: 属性值2;
  ...
  属性n: 属性值n;
}
该标签包含的三个常见属性,分别如下所示:
例如,可以使用 <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>
运行代码,效果如下图所示:


图 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>
代码中使用标签选择器为 <h3> 标签设置了字号为 40px,覆盖了浏览器自带的字号。

运行代码查看效果,如下图所示:


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

相关文章