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 を使用して具体性を高め、試してみましたが、FireBug でプロパティを削除してプロパティを指定!importantすると、それをオーバーライドできません。nonediscli

回避策はありますか?

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

試す

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

ul を li に変更したことに注意してください。

于 2013-09-20T11:44:32.343 に答える
0

あなたのCSSで試してみてlist-type:discください

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

id を使用すると、スタイルを適用するのに十分な特異性が簡単に得られます。

アップデート

クラスとして設定されてulいる時点でid を追加する必要があります。dlrslistこれが、あなたのスタイルが取り上げられない理由です。

HTML

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

CSS

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

最終更新

ではなくに設定list-style-type:discする必要がありますulli

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

いいえ

#dlrsList {
    #itmDlrName {
        list-style-type: disc;
    }
}
于 2013-09-20T11:35:38.193 に答える
0 
list-style-type: disc !important;

!importantcssの上書きに使用

于 2013-09-20T11:37:39.620 に答える
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 に答える