1

クラス「.chartKeyListItem」で常に最初の要素を選択しようとしています。親の「chartKey」の下にあります。したがって、最初の要素である場合、これは最初の子セレクターでうまく機能しますが、その前に3つのアイテムがある場合があるため、そのインスタンスで機能する nth-selector(4) を使用する必要があります。しかし、私のコードは、お互いを壊すことなく両方を処理できるはずです。(最初のインスタンスで 1 番目と 4 番目の "chartKeyListItem" を対象とするため、両方の CSS クラスが読み込まれている場合はどうなりますか) 最初の ".chartKeyListItem" だけを選択する方法はありますか?

また、chartKeyListItem div の量は明確ではなく、2 から 20 の範囲であり、MinMax ラベルは一部のページにのみ表示されますが、CSS はそれらが存在する場合と存在しない場合を処理できる必要があります。 ..

以下のコード: インスタンス 1:

<div class='chartKey'>"
    <div class='chartKeyListItem'> //Just want to add margin to this one
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'> //THIS ONE GETS BOTH CLASSES WHICH I DONT WANT
</div>

インスタンス 2:

<div class='chartKey'>"
    <div class='pollResultsMinMaxLabel' style='width:auto;float:left;margin-left:20px;'>Min</div>
    <div class='pollResultsMinMaxLabel' style='width:auto;float:left;margin-left:20px;'>Max</div>
    <br/>
    <div class='chartKeyListItem'> //Just want to add margin to this one
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'>
    <div class='chartKeyListItem'> //This one will get both class too
</div>

CSS:

.chartKeyListItem:first-child{
     margin-left: 60px !important;
 }
.chartKeyListItem:nth-child(4) {
     margin-left: 60px !important;
 }
4

1 に答える 1

3

first-of-classこのためには、悲しいことにまだ持っていないある種のセレクターが必要になります。ただし、同じ効果を得ることができます:)

.chartKeyListItem {
   margin-left: 60px !important;
}

.chartKeyListItem ~ .chartKeyListItem {
   margin-left: 0 !important;
}

仕組み: クラスのスタイルを設定すると、そのクラスの前にあるそのクラスのインスタンスが 0 margin-left で上書きされます。ここでどのように~機能するかを知ることができます。

于 2013-03-13T14:38:31.627 に答える