1。 11 种选择器类型

1. 元素选择器（类型选择器）

div/p/span...
复制代码

1. 分组选择器 逗号分隔

h2,p
复制代码

1. 通配符属性选择

*与任何元素匹配
复制代码

1. 类选择器 ID 或 选择器

//区分大小写
.menu //class属性值为menu的元素
.menu .active //class属性值同时包含menu、active的元素
复制代码

1. 后代选择器（包括选择器） 空格选择器分隔

//选择某元素后代的元素
h1 em//h1中的em元素
p .important//class属性为important的p元素
复制代码

1. 子元素选择器 > 分隔

//选择作为某元素的子元素的元素
h1 > strong
复制代码

1. 相邻元素选择器 +分隔符

//选择兄弟元素
h1+p//紧跟h1元素后面的p元素
复制代码

1. +分隔符

//选择兄弟元素
h1+p//紧跟h1元素后面的p元素
复制代码

1. ❓❓❓❓❓ 更多参考www.ruanyyifeng。 com/博客/2009/0…

2。选民体重

• ！ important;
• 内联样式;
• ID选择器，权重：100；
• 类，属性选择器和伪类选择器，权重：10；
• 标签选择器和伪元素选择器，权重：1

3。伪类和伪元素的区别

1. 定义

   伪类：其核心用于选择普通选择器无法选择的非文档元素，例如： 伪元素：其核心是require 创建文档中通常不存在的 元素，例如::before

2. 表达式方法

   伪元素，CSS2 中的伪元素用单个冒号表示：。从CSS2.1开始，伪类由一个冒号表示，伪元素由两个冒号::表示。浏览器还接受 CSS2 时代已经存在的用单个冒号编写的伪元素（:before、:after、:first-line、:first-letter 等）。 CSS2 之后的所有新伪元素（例如：:selection）都应该使用双冒号。然而，由于兼容性问题，大多数使用单个冒号。

3. 其他
   • 伪类和伪元素用于表示文档树之外的“元素”。
   • 伪类和伪元素最关键的区别点在于，如果没有伪元素（或伪类），那么是否需要添加元素才能达到目的。如果是，则它是伪元素，否则它是伪类。

作者：Jona
链接：https://juejin.im/post/5e67545cf265da5709703234
来源：掘金。版权所有
商业转载请联系作者授权。非商业转载请注明出处。