1

私は#wants-to-meet1150pxでCSSを変更したいIDを持っています。

通常、メディア クエリを使用する
場合は、ID をターゲットにするだけでよく、次のように記述する必要がある場合もあります。'parent-selector > targeted-selector'

ただし、何らかの理由でメディアクエリが取り消し線/無効になっています: ここに画像の説明を入力

そして、何らかの理由で、それを変更するためにこれを深くする必要がありました:

@media all and (max-width: 1150px) {
            #li-affiliate-incoming-msg {
                #message_container {
                    #td-details {
                        #request_details {
                            #wants-to-meet {
                                margin-top: 5px;
                                margin-right: 0;
                                padding: 8px 20px 3px 20px;
                                color: blue;
                                background: red;
                            }
                        }
                    }
                }
            }
        }

SASS を使用していますが、#wants-to-meetID が 8 タブの深さでネストされています。これが理由でしょうか?

なぜそうなのか、あなたにはわかりますか？

4

4 に答える 4

5

これは悪いネスティングの悪臭を放ちます。3 つまたは 4 つのレベルの深さだけを入れ子にするのが経験則です。マークアップで ID を使用している場合、ID は 1 回しか出現しないため、ネストする理由はまったくありません。

基本的に#wants-to-meet、ブラウザに言う代わりに、 #wants-to-meet(ブラウザはOKと言いました)それは(ブラウザはOKと言いました)の子です#request_detailsそれは(ブラウザはOKと言いました)の子ですそれは#td-details(ブラウザと言いました)の子#message_containerですOK と言う) それは#li-affiliate-incoming-msg(ブラウザは OK と言う) の子です。

冗長です。ここで CSS の特異性に慣れてください: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

補足: html 要素を使用してクラスまたは ID に名前を付けるのはひどい習慣です。#li-affiliate-incoming-msg

于 2013-07-01T20:04:07.607 に答える
2

問題は、より具体的なセレクターがあるため、 a#wants-to-meetでは不十分です。

汚い修正は次のようになります。

#wants-to-meet {
    some-prop: value !important;
}

より具体的なマッチャー値をオーバーライドします。それにもかかわらず、どのパスが最も適しているか、またその理由を知るために、特異性についてすべて読んで理解する必要があります。

于 2013-07-01T20:04:38.763 に答える
1

1776 行目の CSS は、1900 行目のルールよりも具体的です。これが、1900 行の宣言がすべて取り消し線で囲まれている理由です。確かに、その特異性は非常に深い Sass から来ています。

于 2013-07-01T20:04:32.210 に答える