292 字
1 分钟
--
css的常用选择器
2023-12-03

CSS 常用选择器#

一、元素选择器#

  • 作用:根据标签名来选中指定的元素
  • 语法标签名
  • 示例
p {
color: red;
}
  • 缺点:一变全都变

二、ID 选择器#

  • 作用:通过元素的 id 属性选择一个元素
  • 语法#id属性值
  • 示例
#box {
font-size: 20px;
}
  • 缺点:一次只能操作一个元素,容易和 JavaScript 重合

三、类选择器#

为什么要用类选择器#

class 属性可以代替 id 使用,并且 class 是可以重复的

<p class="a"></p>

类选择器的优势#

  • 可以批处理所有 class 为指定值的标签
  • 可以在 style 里随意修改
  • 可以通过 class 属性给元素分组

基本语法#

  • 作用:根据元素的 class 属性值选中一组元素
  • 语法.class属性值
  • 示例
.blue {
color: blue;
}

多 class 值#

一个标签可以指定 多个 class 值,用空格隔开:

<p class="red abc">111</p>

相当于一个属性被分类到了好几个类别中。

四、通配选择器#

  • 作用:选择页面的全部元素
  • 语法*
  • 示例
* {
margin: 0;
padding: 0;
}

实际开发中,应该更常用 class 类选择器

css的常用选择器
https://vilstia.org/posts/学习笔记/css/css的常用选择器/
作者
琴泠 - Lumina Qin
发布于
2023-12-03
许可协议
CC BY-NC-SA 4.0