css选择器

css选择器有哪些类别:

1. 元素选择器（Type Selector）：选择HTML元素的名称，如`p`选择所有段落。

2. 类选择器（Class Selector）：通过元素的class属性来选择元素，如 `.example`选择所有带有class为"example"的元素。

3. ID选择器（ID Selector）：通过元素的id属性来选择唯一的元素，如 `#uniqueId`选择具有id为"uniqueId"的元素。

4. 通配符选择器（Universal Selector）：使用 `* `选择所有元素。

5. 后代选择器（Descendant Selector）：使用空格选择嵌套元素，如 `div` `p` 选择所有在`<div>`内的段落。

6. 子元素选择器（Child Selector）：使用 > 选择直接子元素，如 `ul` > `li` 选择所有`<ul>`下的直接子级`<li>`。

7. 相邻兄弟选择器（Adjacent Sibling Selector）：使用 + 选择相邻兄弟元素，如 `h2` + `p` 选择紧接在`<h2>`后的段落。

8. 通用兄弟选择器（General Sibling Selector）：使用 ~ 选择所有相邻兄弟元素，如 `h2` ~ `p` 选择所有`<h2>`后的段落兄弟。

9. 属性选择器（Attribute Selector）：通过元素的属性来选择元素，如 `[type="text"]` 选择所有具有type属性为"text"的元素。

10. 伪类选择器（Pseudo-class Selector）：表示元素的特定状态，如 `:hover `选择鼠标悬停状态的元素。

11. 伪元素选择器（Pseudo-element Selector）：表示元素的特定部分，如 `::before` 选择元素的前置内容。

12. 组合选择器（Combinators）：组合多个选择器，如 `div.example` 选择所有class为"example"的`<div>`元素。

13. 群组选择器（Grouping Selector）：使用逗号 , 将多个选择器组合在一起，选择多个不同类型的元素，如 `h1`, `h2` 选择所有`<h1>`和`<h2>`元素。

各种分类中有哪些内容，分别如何使用，权重如何:

不同种类的CSS选择器有各自的特点和使用方式，它们的权重也是不同的。权重规则通常如下所示，按照优先级从高到低排列：

1. !important：通过!important声明的样式具有最高优先级，将覆盖所有其他样式。

2. 内联样式（Inline Styles）：在HTML元素内部使用style属性定义的样式，具有更高的优先级。

3. ID选择器：通过ID选择器定义的样式，如 #uniqueId。比如 #uniqueId { color: red; }。

4. 类选择器、属性选择器、伪类选择器：这些选择器具有相等的优先级。类选择器如 .example、属性选择器如 [type="text"]、伪类选择器如 :hover。

5. 元素选择器：使用HTML元素名称定义的样式，如 p。

6. 伪元素选择器：伪元素选择器具有比伪类选择器略高的优先级，如 ::before。

7. 通用选择器（通配符）和组合选择器：这些选择器的优先级较低，如 * 和 div.example。

8. 继承样式：如果没有明确指定样式，元素会继承其父元素的样式。

当多个规则应用于同一个元素时，CSS权重规则将决定哪个样式将被应用。通常，具有更高权重的规则将优先应用。如果多个规则具有相同的权重，则后面定义的规则将覆盖前面的规则。

权重的计算通常是根据选择器类型和数量来确定的。例如，一个ID选择器的权重高于多个类选择器的权重。但要注意，使用!important应当小心，因为它可以导致样式难以维护，应谨慎使用。

涉及顺序的选择器的顺序如何

当多个选择器应用于同一个元素时，CSS遵循"层叠"（Cascading）原则，根据选择器的特定性（Specificity）和来源的顺序来决定最终的样式。以下是关于选择器顺序的一些一般原则：

1. 来源顺序（Source Order）：CSS规则的来源顺序是首要的。如果有多个CSS文件或样式块定义相同的选择器，后面的规则将覆盖之前的规则。

2. 特定性（Specificity）：如果有多个规则应用于相同的元素，特定性将是决定性的。特定性是一个由选择器的种类和数量组成的值，用于表示规则的具体性。一般来说，ID选择器的特定性高于类选择器，而类选择器的特定性高于元素选择器。

3. !important：如果一个规则中包含!important声明，那么它将具有最高的优先级，会覆盖其他规则，无论其特定性如何。

4. 内联样式：内联样式（使用style属性定义的样式）具有比外部样式表中的规则更高的优先级，因此将覆盖外部样式。

总的来说，选择器的特定性是最重要的，其次是!important声明和来源顺序。在编写CSS时，应该遵循良好的规范和结构，以确保样式按预期工作，避免不必要的!important声明，并理解样式来源的优先级。

lass和sass区别？

一、less与Sass分别是什么

1、less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，它可以运行在 Node 或浏览器端。

2、sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 、嵌套 、混合 、导入 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

二、less和sass的相同之处

Less和Sass在语法上有些共性，比如下面这些：

1、混入(Mixins)——class中的class；

2、参数混入——可以传递参数的class，就像函数一样；

3、嵌套规则——Class中嵌套class，从而减少重复的代码；

4、运算——CSS中用上数学；

5、颜色功能——可以编辑颜色；

6、名字空间(namespace)——分组样式，从而可以被调用；

7、作用域——局部修改样式；

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

三、less和sass的区别

Less是基于JavaScript，是在客户端处理的；Sass是基于Ruby的，是在服务器端处理的。

关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

Sass支持条件语句，可以使用if{}else{},for{}循环等等，而Less不支持