css - CSS 选择器名称中的星号

Question

我可以发誓我看到了一个在选择器名称中使用星号的高级 CSS 规则。我正在使用 Bootstrap，我在父 div 中有几个不同的 div，如下所示:

<div class="example">
    <div class="col-sm-1">
        TEST
    </div>
    <div class="col-sm-4">
        TEST
    </div>
</div>

我想使用类似的东西:

div.example div.col-sm-*{
    padding-right:5px;
}

我知道并排添加每条规则不会让我丧命，但我想我已经看到过去做过类似的事情，如果将来存在的话，我想学习速记。我也试过类似的东西:

div.example div.col-sm-[*]{
    padding-right:5px;
}    

这可能吗？

Answer 1

您可能会想到属性选择器:

div.example div[class*="col-sm-"]{
    padding-right:5px;
}

假设每个 div 将拥有的唯一类是一个列类，这样就可以了。或者使用 ^= 代替 *= 来指示 class 属性值以该字符串开始。