无法覆盖css

Question

HTML

<div class="dlrs">
    <div id="listItems">
        <div id="clrCode" class="colorBlock" 
             style="background-image: url("/media/images/orange.png"); background-position: center center; background-repeat: no-          repeat;">
        </div>
        <span>0 pts ( > 20 min)</span>
        <ul id="dlrsList">
            <li id="itmDlrName">Crosstown Auto Centre</li>
            <li id="itmDlrName">Dartmouth Chrysler Jeep Dodge</li>
            <li id="itmDlrName">Grande Prairie Chrysler Jeep Dodge</li>    
        </ul>
    </div>
</div>

CSS

.dlrs {
    //display: inline-block;
    width: 630px;
    margin: 20px 0 20px 20px;
    font-weight: @bldTxt;
    font-size: 14px;

    #listItems {
        width: 200px;
        float: left;
        display: inline-block;

        span {
            position: relative;
            bottom: 16px;
            left: 20px;
        }

        #dlrsList {
            width: 100%;
            text-align: justify;
            /*float: left;
            width: 190px;
            margin-right: 14px;
            margin-bottom: 10px;*/
            #itmDlrName {
                padding: 0px;
                list-style-type:disc;
                position: relative;                
                left: 20px;                
                max-width: 160px;
                font-size: 12px;
            }
        }
    }
}

问题是我想在我的li元素上获取子弹，发生的事情是我的文件中有一个CSS设置说

ol, ul { list-style-type: none; }

我通过在CSS中使用上述ID来提高了特异性，甚至尝试了!important，但是如果我删除FireBug中的none属性并且给{我仍然无法覆盖它{1}} disc的属性然后它可以工作。

有什么工作吗？

Answer 1

这可能是SASS或SCSS或LESS，但它不是CSS。除非通过预处理器运行，否则这将不起作用。

如果你想要直接的CSS，你不能像这样嵌套你的选择器。

修改

由于那里有一个变量，我不得不假设OP在故意使用预处理器。假设他的变量@bldTxt = bold，那么生成的CSS就是：

.dlrs {
    width: 630px;
    margin: 20px 0 20px 20px;
    font-weight: bold;
    font-size: 14px
}

.dlrs #listItems {
    width: 200px;
    float: left;
    display: inline-block
}

.dlrs #listItems span {
    position: relative;
    bottom: 16px;
    left: 20px
}

.dlrs #listItems #dlrsList {
    width: 100%;
    text-align: justify
}

.dlrs #listItems #dlrsList #itmDlrName {
    padding: 0;
    list-style-type: disc;
    position: relative;
    left: 20px;
    max-width: 160px;
    font-size: 12px
}

假设CSS，list-style-type : disc;只需移至.dlrs #listItems #dlrsList，而不是.dlrs #listItems #dlrsList #itemDlrName

Answer 2

在您的CSS中，您list-type:disc尝试

#dlrsList {
    list-style-type: disc;
}

使用id很容易适用于样式。

更新

您需要在ul被设置为班级时向dlrslist添加ID。这就是为什么你的风格没有被拿起来。

<强> HTML

<ul id="dlrslist">
</ul>

<强> CSS

#dlrsList {
    list-style-type: disc;
}

最终更新

您需要在list-style-type:disc上设置ul，而不是li

#dlrsList {
    list-style-type: disc;
}

不会

#dlrsList {
    #itmDlrName {
        list-style-type: disc;
    }
}

Answer 3

list-style-type: disc !important;

使用!important覆盖css

Answer 4

使用类而不是ID：

HTML：

<ul class="dlrsList">
    <li class="itmDlrName">Crosstown Auto Centre</li>
    <li class="itmDlrName">Dartmouth Chrysler Jeep Dodge</li>
    <li class="itmDlrName">Grande Prairie Chrysler Jeep Dodge</li>
</ul>

CSS：

.dlrsList {
    ...
    list-style-type: disc; 
}

Answer 5

您可以使用Ankit Agrawal建议的！important 方法，也可以在 ol，ul {list-style-type：none;}之后移动您的css代码。 } 代码。这样，你的css就会覆盖代码，而代码是你问题的根源。

我更喜欢第二种选择，应尽可能避免使用！important 。

Answer 6

试

li { list-style-type: none !important; }

注意我已将你的ul改为li 重要的，会强制它，如你所知。

Answer 7

确定。试试这个

ol, ul { list-style: none; }

.dlrsList { list-style-type: disc; }

或者只是从CSS中移除ol, ul { list-style-type: none; }，如果您的网站上有更多列表，则为每个列表提供list-style-type的适当CSS属性。