关于 css 选择器的注释，什么是 postcss 和 cssmodule？

什么是 postcss？

根据官网的解释，它是一个用javascript编写的，用于转换css的工具。它可以被认为是一个处理 CSS 的插件集合，需要与 webpack、gulp 等编译工具配合使用才能展示其强大的能力。

目前社区提供了很多插件，比较出名的如下：

如果你了解 babel 的原理，那么你应该听说过 AST，即抽象语法树。编译器对字符串进行词法分析、语法分析和转换，最终达到预期的结果。同样的原理也适用于 postcss。这个包已经为用户提供了解析方法parse，同时也提供了很多转换API。您可以使用这些自己开发 postcss 插件。

之前我们使用的是css选择器，它对整个页面有效，即全局有效。每次迭代需求时，都需要考虑每次添加新的css是否会影响其他地方。所以我们有时会选择将命名空间添加到样式表中。 css 模块为我们提供了另一种开发方式，可以让 css 具有本地作用域。

的用法如下：

用法就是这么简单，基本一看就懂。 css-loader为我们提供了css Module开关。只需将参数选项模块添加到 css-loader 即可将其打开。注意：必须放在less或者sass的加载器之前。

它如何实现本地范围？

打开元素面板，你会发现它把class变成了md5图章，与每个组件一一对应，并且保持唯一。

由此我们想到了vue的scoped，它也解决了css局部作用域的问题！

它在dom上生成一个数据属性，并在类选择器中添加一个属性选择器，类似于之前的md5戳。不过由于属性选择器的加入，选择器的优先级变高了，在组件外重写css属性就没那么容易了！

如果喜欢我的回答，请关注我。如果您有任何疑问，可以发表评论。让我们一起学习、一起成长！

1。元素选择器标签名称 { }

2。 id 选择器 #id 属性值 { }

3。类选择器.class 属性值 { }

4。选择器分组（联合选择器）

功能：可以同时选择多个选择器对应的元素（一般用于集体声明）

语法：选择器 1、选择器 2、选择器 n{ }

5。复合选择器（交叉点选择器）

功能：选择更准确、更详细的目标元素并为其设置属性

语法：选择器 1 选择器 2 选择器 n{ }

！请注意，选择器之间不能有空格，并且它们必须靠近

6。通配符选择器

功能：用于选择页面上所有元素

语法：*{ }

7。后代元素选择器

功能：选择指定元素的指定后代元素

语法：祖先元素 后代元素 { }

8。子元素选择器

功能：选择指定父元素的子元素

语法：父元素>子元素

9。伪类选择器

伪类代表元素的特殊状态

:hover 元素移入时的状态

:visited 元素被访问后的状态

:active 单击时元素的状态

10。属性选择器

功能：根据元素中的属性或属性值选择指定元素

语法：[属性名称]选择包含指定属性的元素

？ [属性名称=“属性值”]选择具有指定属性值的元素

？ [属性名称^="属性值"] 选择属性值以指定内容开头的元素

？ [属性名称$="属性值"] 选择属性值以指定内容结尾的元素

？ [属性名称*=“属性值”] 选择属性值包含指定内容的元素

11。兄弟元素选择器

+选择器

功能：选择某个元素旁边指定的兄弟元素

语法：上一个 + 下一个（作用于后者）

~选择器

功能：选择所有后续兄弟元素

语法：上一个~以下所有

CSS 样式规则中

1。选择器用于指定 CSS 样式应用到的 HTML 对象。大括号是为对象设置的特定样式。

2。属性和属性值以“键值对”的形式出现。

3。属性是为指定对象设置的样式属性，例如字体大小、文字颜色等。

4。属性和属性值用英文“:”连接。

5。使用英文“;”区分多个“键值对”。

ID 用于标识页面上的特定元素（例如站点导航），并且必须是唯一的。 ID 还可用于识别持久结构元素，例如主导航或内容区域。 ID 还可用于标识一次性元素，例如链接或表单元素。一个ID只能应用于页面上的一个元素。

class相同的类名可以应用于页面上任意数量的元素，因此类的功能要强大得多。类非常适合表示内容类型或其他类似项目。

在实际开发中，需要根据实际使用情况来决定使用哪种风格。对于单个界面上单个元素的显示样式，建议使用id来定位。如果多个界面通用，或者同一个界面的多个元素有相同的样式，那么使用class类来统一样式会方便很多。

以下是最简单的例子：

显示效果：