css选择器有哪些？优先级？哪些属性可以继承？

选择器

CSS选择器有多种类型，它们用于选择HTML文档中的元素以应用样式。以下是一些常见的CSS选择器：

1. 元素选择器：通过元素的名称选择元素，例如p选择所有段落元素。

p {
    font-size: 16px;
}

2. 类选择器：通过元素的class属性选择元素，例如.my-class选择具有my-class类的元素。

..my-class {
    background-color: yellow;
}

3. ID选择器：通过元素的id属性选择元素，例如#my-id选择具有my-id id的元素。

#my-id{
    font-weight: bold;
}

4. 后代选择器：选择特定元素的后代元素，例如ul li选择ul元素内的所有li元素。

ul li {
    text-decoration: underline;
}

5. 相邻兄弟选择器：选择与指定元素在同一父元素下的相邻兄弟元素，例如h2 + p选择紧接在h2元素后的p元素。

h2 + p {
    text-decoration: underline;
}

6. 通用选择器：选择所有元素，表示为*。

*{
	color: red;
}

7. 属性选择器：通过元素的属性来选择元素，例如[type="text"]选择所有具有type属性值为"text"的元素。

8. 伪类选择器：选择元素的特定状态或位置，例如:hover选择鼠标悬停在元素上的状态。

• :hover：选择鼠标悬停在元素上的状态。

• :active：选择被激活的元素，通常是用户点击或按下鼠标按钮的瞬间。

• :focus：选择当前拥有焦点的元素，通常是用户使用键盘或鼠标输入的元素。

• :first-child：选择父元素下的第一个子元素。

• :last-child：选择父元素下的最后一个子元素。

• :nth-child(n)：选择父元素下的第n个子元素，其中n是一个整数。

• :not(selector)：选择不匹配指定选择器的元素。

• :even 和 :odd：分别选择偶数和奇数位置的元素。

• :first-of-type 和 :last-of-type：选择父元素下的第一个和最后一个特定类型的子元素。

• :nth-of-type(n)：选择父元素下的特定类型的子元素中的第n个。

9. 伪元素选择器：选择元素的特定部分，例如::before和::after用于在元素的内容前后插入内容。

• ::before：在元素内容之前插入虚拟内容。

• ::after：在元素内容之后插入虚拟内容。

• ::first-line：选择元素的第一行文本。

• ::first-letter：选择元素的第一个字母或字。

• ::selection：选择用户选中的文本。

• ::placeholder：选择表单字段中的占位符文本。

• ::marker：选择列表项的标记部分（例如列表项前面的小圆点或数字）。

• ::backdrop：选择元素的背景容器，通常用于模态对话框背后的半透明遮罩。

CSS选择器的优先级

CSS样式表中的选择器具有不同的优先级，当同时使用，优先级更高的会生效。

总结: !important > 内联 > ID选择器 > 类选择器 > 标签选择器

以下CSS优先级的详细解释：

1. !important：当一个样式规则中使用了!important时，它会具有最高的优先级，无论其出现在哪里，都会覆盖其他规则。然而，滥用!important会导致样式表变得难以维护，应该谨慎使用。

2. 内联样式：内联样式通过元素的style属性设置，具有较高的优先级，因此将覆盖外部样式表中的规则。

3. ID选择器：ID选择器具有较高的优先级，因为ID在文档中应该是唯一的。例如，#my-id的优先级高于其他选择器。

4. 类选择器、属性选择器和伪类选择器：这些选择器具有相同的优先级，通常比元素选择器和伪元素选择器更具体。例如，.my-class和[type="text"]的优先级相同。

5. 元素选择器和伪元素选择器：这些选择器通常具有较低的优先级，因为它们不够具体。例如，p和::before的优先级较低。

6. 通用选择器：通用选择器*通常具有最低的优先级，它会匹配所有元素。

7. 继承：继承的属性通常具有较低的优先级，因为它们不是通过选择器直接应用的。继承属性是从父元素继承到子元素的，但如果子元素具有自己的样式规则，那么子元素的样式规则将覆盖继承的值。

同时匹配多个选择器
当一个元素同时匹配多个选择器，比如 .parent .child 和 .child 都匹配同一个元素时，CSS 的优先级规则会决定哪个规则具有更高的权重。这种情况下，可以根据以下规则来比较它们的优先级：

• 选择器的特殊性：选择器的特殊性指的是选择器的复杂性和具体性。特殊性通常按以下方式计算：

  • 每个ID选择器（#my-id）增加100个特殊性值。
  • 每个类选择器、属性选择器、伪类选择器（.my-class、[type=“text”]、:hover）增加10个特殊性值。
  • 每个元素选择器和伪元素选择器（p、::before）增加1个特殊性值。
  • 通用选择器()、组合符号（+、>、~）、继承选择器和通配符选择器（)都没有特殊性值。

• 权重值：如果特殊性相同，可以考虑权重值。权重值是一个四部分的值，通常以以下格式表示：a,b,c,d，其中：

  • a 表示 !important 的数量。
  • b 表示 ID 选择器的数量。
  • c 表示类选择器、属性选择器和伪类选择器的数量。
  • d 表示元素选择器和伪元素选择器的数量。

  比较两个选择器的权重值，较大者优先级较高。

• 规则的位置：如果特殊性和权重值都相同，后面出现的规则将覆盖前面的规则。这意味着在样式表中后面的规则具有更高的优先级。

下面是一个示例来比较两个选择器的优先级：

.parent .child {
    color: red;
}

.child {
    color: blue;
}

在这个例子中，假设一个具有类 .child 的元素是 .parent 的后代。虽然 .child 选择器出现在 .parent .child 之前，但 .parent .child 的特殊性更高，因此它的优先级也更高。因此，这个子元素的文本颜色将是红色。

属性继承

css有些属性是可继承的，虽然这些属性可以继承，但具体的继承行为可能会受到父元素和子元素之间的其他样式规则的影响。某些属性在特定情况下可能会被子元素的样式所覆盖或重写。此外，不同的HTML元素可能对可继承属性的继承行为有所不同。所以在不同的场景使用需要注意。

1. 字体属性：

   • font-family：字体族名称。
   • font-weight：字体粗细。
   • font-style：字体样式（正常、斜体等）。
   • font-size：字体大小。
   • line-height：行高。

2. 文本属性：

   • color：文本颜色。
   • text-align：文本对齐方式（左对齐、居中、右对齐等）。
   • text-decoration：文本装饰（下划线、删除线等）。
   • text-transform：文本转换（大写、小写等）。

3. 行高属性：

   • line-height：行高。

4. 列表属性：

   • list-style-type：列表项标记的类型（圆点、数字、字母等）。
   • list-style-position：列表项标记的位置（内部、外部）。

5. 表格属性：

   • border-collapse：表格边框合并方式。
   • border-spacing：表格边框间距。

6. 生成内容属性（伪元素）：

   • content：生成内容的文本或图像。

7. 可继承的百分比值：

   • width：元素的宽度。
   • height：元素的高度。