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

我正在创建一些 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可能会出现在用户添加的某些第 3 方 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

有谁知道如何做到这一点？是否有可能将中间的单词改为 contains only ？

我知道我可以间隔类名等，但很想尝试一下，因为对我来说，这**

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

看起来比这个更干净：

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

以同样的方式你可以这样做.class.class2.class3 { /*styles*/ }要仅定位具有所有 3 个类的事物，您可以组合属性选择器来执行相同的操作：

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

当然，在这样的情况下它不会起作用：

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

因为它包含两者mybuttons-button and -large.

如果您不认为这种情况会发生或成为问题，那么您应该没问题。这是一个小提琴：http://jsfiddle.net/3wEJe/ http://jsfiddle.net/3wEJe/

但绝对不会推荐它。