CSS优先级

CSS优先级是用来决定当多个CSS规则应用在同一个元素上时，哪个规则的样式会被应用。CSS优先级是根据选择器的特定性和源代码中的顺序来确定的。

以下是CSS优先级的规则，按照从高到低的顺序：

1. 内联样式（Inline styles）：通过在HTML标签的style属性中直接定义样式，具有最高的优先级。

例如：<div style="color: red;">Hello World</div>

2. ID选择器（ID selectors）：通过元素的ID来选择样式。

例如：#myElement { color: blue; }

3. 类选择器、属性选择器和伪类选择器（Class selectors, Attribute selectors, Pseudo-class selectors）：通过类名、属性名或伪类来选择样式。

例如：
.myClass { 
    color: green; 
  }
[type="text"] { 
    font-size: 14px; 
  }`
:hover { 
    background-color: yellow; 
  }

4. 元素选择器和伪元素选择器（Element selectors, Pseudo-element selectors）：通过元素名或伪元素来选择样式。

例如：p { font-weight: bold; }、::before { content: "Before"; }

5. 通配选择器和子选择器（Universal selector, Child selector）：通配选择器选择所有元素，子选择器选择特定元素的直接子元素。

例如：* { margin: 0; }、div > p { color: gray; }

6. 继承的样式（Inherited styles）：继承自父元素的样式，具有最低的优先级。

例如：body { font-family: Arial; }

当多个规则具有相同的优先级时，后面出现的规则将覆盖前面的规则。如果多个规则具有不同的优先级，具有较高优先级的规则将被应用。

需要注意的是，使用!important可以将样式声明的优先级提升到最高，但是滥用!important可能会导致样式的维护和扩展困难，应谨慎使用。