0

少し前に、cssでこれを実行できることがわかりました（ ">"の使用）：

#viewCounterFix > .hourMinSec > .hour > .devider ,
#viewCounterFix > .hourMinSec > .min > .devider ,
#viewCounterFix > .hourMinSec > .sec > .devider{
    left: 24px;
}

さて、あなたが見ることができるように上記の例では、私はまったく同じものが必要であり、唯一の違いは.hour、.min、.secです。

これを行うためのより短い方法があるかどうか疑問に思いましたか？多分次のようなものです：

#viewCounterFix > .hourMinSec > [.sec or .min or .hour] > .devider{
    left: 24px;
}

それで、そのような構文は存在しますか？

編集：これが完全な構造です

<div class="hourMinSec">
    <div class="hour">
        <span class="leftHour">1</span><div class="devider"></div><span class="rightHour">1</span>
    </div>
    <img class="leftClockDots" src="/bids/images/dots.png">
    <div class="min">
        <span class="leftMin">3</span><div class="devider"></div><span class="rightMin">5</span>
    </div>
    <img class="rightClockDots" src="/bids/images/dots.png">
    <div class="sec">
        <span class="leftSec">0</span><div class="devider"></div><span class="rightSec">1</span>
    </div>
    <span class="time"><span class="hourText">hour</span><span class="minText">min</span><span class="secText">sec</span></span>
</div>
4

4 に答える 4

2

標準のCSSでは、あなたの方法が最良の選択肢です。

CSSルールの途中にさまざまなクラスを含めることはできません。

ただし、に含まれる要素が、、のみである場合.secは、CSSルールからこれを省略できます。.min.hour.hourMinSec

#viewCounterFix > .hourMinSec .devider {
    left: 24px;
}
于 2012-06-27T11:46:49.690 に答える
2

残念ながら、そのような構文はcssには存在しませんが、次のような要素に別のクラス.hour .minを追加できます。.sec.foo

そして持っている

#viewCounterFix > .hourMinSec > .foo > .devider {
    left: 24px;
}

その特異性が必要ない場合は、1つのセレクターを省略できます。

#viewCounterFix > .hourMinSec .devider {
    left: 24px;
}
于 2012-06-27T11:47:32.170 に答える
2

このような構文はCSS4に存在し、現在一部のブラウザーに存在します。

/セレクター:-moz-any()：:-webkit-any()

CSS4の:matches()セレクター

ところで、.hourMinSec他に何も含まれていない場合は、これらの3つの数字だけを使用すると、次のように使用できます*。

#viewCounterFix > .hourMinSec > * > .devider {
    left: 24px;
}
于 2012-06-27T11:50:36.370 に答える
1

存在しませんが、にクラスを追加することが.secでき.minます。.hour.time

#viewCounterFix > .hourMinSec > .time > .devider{
    left: 24px;
}
于 2012-06-27T11:47:39.330 に答える