覆盖元素上的css样式

Question

所以我的html中有一个元素，我需要应用一个特殊的样式。 我可以用css定位elemnt，但它会在css中覆盖多个其他地方。 如何确保应用一种样式而不是另一种样式？

我尝试在我的CSS中使用！important，但它仍然不起作用。

我在谈论

 ul.M1 li.M3 {
    font-size:13px;
 }

但是不使用这个，而是使用它：

li.M3 {
    font-size: 100px;
}

它也会覆盖其他一些地方。

Answer 1

更正您的拼写并使用!important代替!importent。

对于实例，

ul.M1 li.M3 {
    font-size:13px !important; 
 }

在样式表的最后一行声明它，并在</head>的最后将页面中的样式表链接起来。

希望这有帮助。

Answer 2

css中的优先顺序：

• 内联样式
• 嵌入式样式
• 外部样式

和选择器优先级为：

• ID选择器
• 属性选择器
• 类选择器
• 子选择器
• 相邻的兄弟选择器
• 后代选择器
• 类型选择器

但!important具有最高优先级，如果两个或多个规则具有!important，则优先级将如上所述。

ul.M1 li.M3 {
    font-size:13px; !important
 }

Answer 3

在你想要完成的规则​​背后使用!important！important。

li.M3 {
   font-size: 100px !important;
}

Answer 4

你应该可以使用！important而不会出现问题：

 ul.M1 li.M3 {
    font-size:13px !important;
 }

但我建议不这样做。我尽量避免不惜一切代价使用!important。原因是一旦应用，很难取消它。这可能会导致一些重要的维护问题。

我建议利用特异性来应用你的风格。学会喜欢浏览器的开发者工具，并使用它们来识别正在应用的样式，和正在应用它的选择器。

然后，创建一个新的，稍微更具体的选择器，它将承载更多的重量。例如，如果您将ID应用于ul，您可以利用它来构建一个更具体的选择器，该选择器应该胜出：

ul#myID li.M3 {
   font-size:13px !important;
}