我可以用类定义覆盖#id ul li行为 [英] Can I override a #id ul li behaviour with a class definition

问题描述

我有一个由#id标识的区域，并且有一个CSS：

I have an area that is identified by a #id and there is a CSS like:

#id ul li {
    margin:0;
}

我可以针对该区域中的特定UL覆盖边距设置？我知道#id在评估格式时产生了非常高的优先级。

can I, for a specific UL in that area, override the margin-setting? I understand that #id creates very high priority in evaluating the formatting.

我试过：

.myclass ul li {
    margin-left: 20px;
}

和

#id ul.myclass {

以及

#id li.myclass {

是否可能？

推荐答案

我同意SWilk，避免！important 如果可能（这是可能的）。 SWilk没有提供的其他一些解决方案是：

I agree with SWilk, avoid !important if possible (and it is possible here). Some other solutions that SWilk did not offer is:

#id ul.myclass li {

或...

#id ul li.myclass {

关键是增加选择器的特异性，解决方案。您的原始解决方案没有工作的原因是，您没有包括其他标记（ ul 或 li ） #id 添加 .myclass 。

The key is increasing the specificity of the selector, which the above, and SWilk's solutions do. The reason your original solutions did not work is that you did not include the other tag (ul or li) nor the #id with your addition of the .myclass.

在您的评论显示结构后添加：

（如您在评论中所述）：

If your html is this (as you stated in your comment):

<div id="ja-col2">
  <div>.... 
    <ul class="latestnews">
      <li class="latestnews">

您当前的css是（如另一个注释中所述）：

And your current css is (as stated in another comment):

#ja-col1 ul li, 
  #ja-col2 ul li { 
    margin:0; padding-left:15px; 
  } 
#ja-col2 .latestnews ul li, /*does not exist*/
  .latestnews #ja-col2 ul li, /*does not exist*/
  .latestnews ul li, /*does not exist*/
  ul.latestnews li.latestnews { 
     list-style:disc outside url("../images/bullet.gif"); 
     margin-left:15px; padding-left:15px; 
  } 
ul li { line-height:180%; margin-left:30px; }

您没有看到任何更改的原因是您的选择器路径中有三个不存在html结构，并且通过特异性获胜的是第一组。您需要：

The reason you are not seeing any change is because three of your selector paths do not exist in your html structure, and the one that wins by specificity is the very first group. You need:

#ja-col2 ul.latestnews li

要覆盖＃ja-col2 ul li 。

这篇关于我可以用类定义覆盖#id ul li行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！