Question

不久前我发现你可以用css（使用“＆gt;”）来做到这一点：

#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;
}

Answer 2

很遗憾，css中不存在此类语法，但您可以在.hour .min和.sec元素中添加另一个类，例如.foo

然后有

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

如果您不需要这种特异性，可以省略一个选择器：

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

Answer 3

此类语法将存在于CSS4中，现在存在于某些浏览器中：

:-moz-any() / :-webkit-any()选择器：

CSS4的:matches()选择器

http://dev.w3.org/csswg/selectors4/#matches

顺便说一句，如果.hourMinSec只包含其他内容，只有这三个数字，那么您可以使用*：

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

Answer 4

它不存在，但您可以在.sec，.min和.hour上添加一个类，让我们说.time并将其添加为：

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

更复杂的选择

4 个答案: