2

css クラスにスタイルを追加するときに CSS について非常に厄介なことは、他の要素/クラスを単独で適用する可能性があることです。

それを防ぐ最善の方法は何ですか？

例えば：

HTML:

<div class='main-content'>
    <p> Hello World </p> 
    <span> Test One </span>
    <div class='column'>
        <span> Test Two</span>
    </div> 
</div>

CSS:

.main-content span {
    background: #921192;
    color: white;
    padding: 3px 4px;
    margin: 0 5px;
}


.column  span {
    font-size:20px;
    text-transform:none;
    display:inline-block;
}​

<span>「Test Two」に背景色を付けたくありません。

テスト: http://jsfiddle.net/szm9c/1/

4

5 に答える 5

6

必要な要素を実際に選択するセレクターを使用します。この場合>、子セレクターで十分です。

.main-content > span {
    background: #921192;
    color: white;
    padding: 3px 4px;
    margin: 0 5px;
}

http://jsfiddle.net/mattball/mQFz2/

于 2012-04-28T18:20:48.743 に答える
2

これは継承とは関係ありません。

CSS を適切に使用するには、影響を与えたい要素のみに一致するセレクターを使用して、要素にプロパティを割り当てます。(与えられた例は、有用な分析やより良いアプローチに関する建設的な提案を行うにはあまりにも人工的です。)

于 2012-04-28T18:28:13.257 に答える
2

.main-content > span直接の子孫要素のみを選択する を使用します。

于 2012-04-28T18:21:10.653 に答える
0

これを使用できます

.main-content > span {
background: #921192;
color: white;
padding: 3px 4px;
margin: 0 5px;
}

そのスタイルのように使用すると、クラスのスパンに.main-content > spanのみ影響しますimmediate child.main-content

于 2012-04-28T18:23:45.670 に答える