0

私は次の構造のhtmlを持っています：

<div class="property-desc clearfix">
        <div class="left">
            <ul class="prop-iconlist">
                <li class="pdf"><a href="#">Milk</a></li>
                <li class="text"><a href="#">Eggs</a></li>
                <li class="htm"><a href="#">Cheese</a></li>
                <li class="doc"><a href="#">Vegetables</a></li>
                <li class="text"><a href="#">Fruit</a></li>
            </ul>
        </div>
    </div>

リストアイテムのタグにスタイルを適用しようとしています。

.prop-iconlist li a {
text-decoration: none;
font-size: 12px;
color: 
#676767;
}

しかし、どういうわけか、property-desc.leftのスタイルがそれに適用されているようです。

.property-desc .left a {
font-weight: bold;
color: 
#5473ba;
padding: 0;
margin: 0;
font-weight: 12px;
text-decoration: none;
}

リストアイテムのaに希望のスタイルを適用するにはどうすればよいですか？どんな助けでも大歓迎です。

4

3 に答える 3

3

.prop-iconlist li a、このセレクターは。よりも具体的ではありません.property-desc .left a。その結果、最初のセレクターが機能していません。

この問題を解決するには、最初のセレクターを最後のセレクターよりも具体的にするか、最後のセレクターを最初のセレクターよりも具体的にしないようにします。どちらの方法でも問題なく動作します。

.left .prop-iconlist li a（より具体的な最初のセレクターなので.property-desc .left a、機能します）

.left a（最後のセレクターはより具体的.prop-iconlist li aではないため、このセレクターは機能せず、最初のセレクターは機能します）

css-selector-specificityについてグーグルで検索し、このトピックについて詳しく知ることができます。また、どのセレクターがより具体的であるかを確認するには、このサイト（http://specificity.keegan.st/）にアクセスしてください。

于 2013-03-05T07:17:39.640 に答える
2

.property-desc .left aより具体的です.prop-iconlist li a。おそらく最善の方法は、具体性を低くするか、または何か.property-desc .left aに変更することです。.property-desc .left > a状況によります。

そのルールを絶対に推論できない場合は、オーバーライドされたものをオーバーライドする（gasp）特殊なケースをいつでも作成できます。

.property-desc .prop-iconlist li a {
    /* Repeat some things here */
}
于 2013-03-05T00:38:25.430 に答える
2

セレクターの特異性について調べる必要があります。基本的に、異なるタイプのセレクターは、適用するスタイルルールを決定するときに、より高い重みを持ちます。この場合、クラスセレクタは要素セレクタよりも重みが大きいため、2つのクラスセレクタを使用する2番目のルールは、1つしかない最初のルールを上書きします。

http://www.w3.org/TR/CSS2/cascade.html#specificity

于 2013-03-05T00:40:31.933 に答える