1

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，但我仍然无法覆盖它，如果我删除noneFireBug 中的属性并为其提供disc属性，li那么它可以工作。

有什么解决办法吗？

4

7 回答 7

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

于 2013-09-20T12:16:41.170 回答
0

好的。尝试这个

ol, ul { list-style: none; }

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

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

于 2013-09-20T11:47:53.280 回答
0

尝试

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

请注意，我已将您的 ul 更改为 li ！important 将强制执行您已经知道的操作。

于 2013-09-20T11:44:32.343 回答
0

使用类而不是 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; 
}
于 2013-09-20T11:40:41.630 回答
0

您可以使用 Ankit Agrawal 建议的!important方法，或者您可以在ol, ul { list-style-type: none;之后移动您的 css 代码。}代码。这样，您的 css 将覆盖作为问题根源的代码。

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

于 2013-09-20T11:41:40.600 回答
0

在您的 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;
    }
}
于 2013-09-20T11:35:38.193 回答
0 
list-style-type: disc !important;

用于 !important覆盖css

于 2013-09-20T11:37:39.620 回答