HTML + CSS 连载 | 08 - CSS 通用和简单选择器

一、CSS 选择器

在前面的开发中我们已经通过 CSS 选择器为一些元素设置样式,CSS 选择器就是按照一定的规则筛选出符合条件的元素,为之添加 CSS 样式。

CSS 选择器有非常多的种类,大概分为以下这些:

  • 通用选择器(universal selector)
  • 元素选择器(type selectors)
  • 类选择器(class selectors)
  • id 选择器(id selectors)
  • 属性选择器(attribute selectors)
  • 组合(combinators)
  • 伪类(pseudo-classes)
  • 伪元素(pseudo-elements)

通用选择器

通用选择器是选择范围最大的选择器,所有的元素都会被选中,一般使用通用选择器给所有的元素做一些通用性的设置,比如设置内外边距、或者重置一些样式等;通用选择器使用 * 来表示。

HTML 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      font-size: 30px;
      color: aquamarine;
    }
  </style>
</head>
<body>
  <h1>我是h1元素</h1>
  <div>我是div元素</div>
  <p>我是p元素</p>
  <span>我是span元素</span>
</body>
</html>

通用选择器会遍历所有的 html 元素,然后对它们进行属性的设置,这样遍历的方式会造成极大的性能损耗。

在开发中不推荐使用通用选择器设置属性,如果一些元素做通用的设置,推荐使用简单选择器。

简单选择器

简单选择器也是开发中使用最多的选择器,简单选择器有以下几种类型:

  • 元素选择器:使用元素名称定位元素,div {color: red}
  • 类选择器:使用 class 属性值 . class属性值定位元素,.box {font-size: 20px}
  • id选择器:使用 id 属性值 # id属性值 定位元素,#info {color: red}

在开发中如果我们要对一些元素进行通用的设置,比如 body、p、div、span 等元素都具有默认的内边距和外边距,我们需要将这些边距去除,使用通用选择器会遍历所有元素,性能损耗较大,因此我们可以使用元素选择器来实现。

HTML 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*更推荐的用法,使用简单选择器*/
    body, p, div, h1 {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <h1>我是h1元素</h1>
  <div>我是div元素</div>
  <p>我是p元素</p>
  <span>我是span元素</span>
</body>
</html>

通过 Chrome 的检查工具,可以看到内边距和外边距的值都已经被重置为 0;

id 和 class 属性都是 HTML 元素的全局属性,class 属性值可以有多个并且可以重复,而 id 属性的值是唯一且不能重复的,id 的属性值可以有多个单词组成,单词之间可以使用中划线、下划线或者驼峰的方式命名,不推荐使用标签名作为 id 的属性值。

由于 CSS 是层叠样式表,在 HTML 文档中,使用不同的选择器对同一个元素进行样式设置,如果设置的样式属性相同,则会发生样式覆盖的现象;

HTML 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 使用元素选择器定位 */
    div {
      color: red;
      font-size: 10px;
    }
    /* 使用class选择器定位 */
    .box1 {
      color: royalblue;
      font-size: 20px;
    }
    /* 使用id选择器定位 */
    #info {
      color: yellowgreen;
      font-size: 40px;
    }
  </style>
</head>
<body>
  <div class="box1" id="info">我是box1</div>
  <!-- 使用中划线和下划线命名, 多个class属性值使用空格隔开,id属性值只能有一个 -->
  <div class="box-two box_name" id="box_info">我是box2</div>
  <!-- 驼峰命名法,大驼峰/小驼峰 -->
  <div class="boxThree BoxName">我是box3</div>
</body>
</html>

多个相同的属性作用在同一个元素上时,之后最后一个设置的属性会生效,即从上往下最后一个属性的值会将前面的全部覆盖。

相关推荐
牧羊狼的狼37 分钟前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手2 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲2 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell3 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮4 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel5 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip5 小时前
JavaScript事件流
前端·javascript
CodeCraft Studio5 小时前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换
赵得C6 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG6 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js