面试题：CSS内联样式与内部样式表的优先级问题

Question

在一个HTML页面中，同时存在内联样式和内部样式表，并且对同一个元素设置了相同属性但不同值，请问最终显示哪个样式的值？为什么？如何调整优先级使内部样式表的设置生效？

Answer 1

1. 最终显示样式值：
   • 最终显示内联样式的值。
2. 原因：
   • 在CSS的优先级规则中，内联样式具有较高的优先级。优先级顺序大致为：内联样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 标签选择器、伪元素选择器 > 通配符选择器。内联样式直接写在元素的style属性中，与元素紧密相关，所以优先于内部样式表生效。
3. 调整优先级使内部样式表的设置生效：
   • 使用!important声明：在内部样式表中，给需要生效的属性值添加!important声明。例如，假设内部样式表中有.my - class { color: blue; }，若想让这个颜色设置生效，可改为.my - class { color: blue!important; }。但需谨慎使用!important，因为它会打破正常的优先级规则，可能使样式难以维护。
   • 提高选择器权重：增加内部样式表选择器的特异性。比如将简单的标签选择器（权重低）改为ID选择器（权重高）。例如，原来是p { color: red; }，改为#my - paragraph { color: red; }（假设元素有id="my - paragraph"），这样内部样式表的优先级会提高从而生效。