css - 更复杂的选择

Question

不久前我发现你可以在 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>

Answer 1

对于标准 CSS，您的方法是最佳选择。

不可能在 CSS 规则中间有多个类。

但是，如果.sec , .min , .hour是唯一将在 .hourMinSec 中的元素，你可以从你的 CSS 规则中省略这个:

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