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>

score 2 · Accepted Answer

使用标准 CSS，您的方法是最佳选择。

在 CSS 规则的中间不可能有不同的类。

然而，如果.sec, .min,.hour是唯一会出现在中的元素.hourMinSec，你可以从你的 CSS 规则中省略这个：

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

score 2 · Accepted Answer

不幸的是，这种语法在 css 中不存在，但您可以向您的.hour .min和.sec元素添加另一个类，例如.foo

然后有

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

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

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

score 2 · Accepted Answer

这样的语法将存在于 CSS4 中，并且现在存在于某些浏览器中：

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

CSS4 的:matches()选择器

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

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

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

score 1 · Accepted Answer

它不存在，但您可以在.sec,.min和上添加一个类.hour，让我们说.time和 bo 这个：

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

css - 更复杂的选择

4 回答 4

Related

Reference