如何通过其部分类名CSS获取元素

Question

我正在创建几个css按钮,并希望尽可能短的样式,所以我开始这样

[class*='mybuttons-button']{
    margin-top:5px;
    -webkit-border-radius:4px;
    -khtml-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    display:inline-block;
    padding:6px 12px;
    color:#fff;
    vertical-align:middle;
    cursor:pointer;
}

这将影响包含类的所有元素 my-button

现在我想深入了解它并做到这一点

[class*='-large']{
    padding: 10px 16px;
    font-size:120%;
    line-height: 1.33;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
}
[class*='mybuttons-button-color']{
    background:blue;
}

但由于该类 -large可能出现在用户添加的某些第三方CSS中,我希望更具体,并说出类似的内容

[class*='mybuttons-button-*ANYTHING*-large']

所以我不必这样做

mybuttons-button-color-large
mybuttons-button-red-large
mybuttons-button-green-large
mybuttons-button-color-medium
mybuttons-button-red-medium
mybuttons-button-green-medium

有谁知道这样做的方法？是否有可能将中间词指甲仅包含？

我知道我可以让班级名称等空间,但是我很乐意尝试这个,因为对我来说,**

<span class="mybuttons-button-color-large"></span>

看起来比这更干净:

<span class="mybuttons-button color large"></span>

Answer 1

以同样的方式,你可以这样做.class.class2.class3 { /*styles*/ }只针对拥有所有3个类的东西,你可以组合属性选择器来做同样的事情:

[class*="mybuttons-button"][class*="-large"] { /*styles*/ }

当然,它不适用于这样的情况:

<span class="my-buttons-button-color-small something-else-large"></span>

因为它包含mybuttons-button和-large.

如果您认为不会发生或存在问题,那么您应该没问题.这是一个小提琴:http://jsfiddle.net/3wEJe/

绝对不会推荐它.