[分享]css中 有几种样式 优先级

CSS 中有不同种优先级的样式。在 CSS 中，样式可以通过选择器来定义，不同的选择器分配不同的优先级： 1. ID 选择器的优先级最高，即 id。 2. 类选择器和属性选择器的优先级相同，即 .cl...

CSS 中有不同种优先级的样式。在 CSS 中，样式可以通过选择器来定义，不同的选择器分配不同的优先级：
1. ID 选择器的优先级最高，即 #id。 2. 类选择器和属性选择器的优先级相同，即 .class 和 [attr]。 3. 标签选择器的优先级比类选择器低，即 tag。 4. 通配符选择器和子选择器的优先级最低，即 * 和 >。
另外还有一些特殊的选择器，如伪类和伪元素选择器，它们的优先级高于标签选择器，但低于 ID 选择器。
当同时存在多个样式作用于同一元素时，CSS 会按照优先级从高到低的顺序应用这些样式。如果两个样式的优先级相同，则后者覆盖前者。例如：

css
p { color: red; }
p { font-size: 14px; } 

在上面的代码中，`color` 和 `font-size` 属性都作用于 `p` 标签。由于标签选择器的优先级低于属性选择器，所以第二个样式会覆盖第一个样式。因此，最终 `p` 标签的字体大小是 14 像素，颜色是红色。
如果要给同一个元素应用不同优先级的样式，可以使用 !important 修饰符。使用 !important 修饰符的样式会覆盖其他样式，除非其他样式也使用了 !important 修饰符。例如：

css
p { color: red !important; }
p { color: blue; } 

在上面的代码中，第一个样式使用了 !important 修饰符，所以它会覆盖第二个样式。因此，最终 `p` 标签的颜色是红色。
结论
在 CSS 中，选择器的优先级决定了样式的权重。更高优先级的样式会覆盖低优先级的样式。在应用样式时，我们需要注意选择器的优先级，以确保所应用的样式正确。同时，如果需要覆盖其他样式，可以使用 !important 修饰符。