html通过类名获取,如何通过其部分类名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可能出现在用户添加的某些第三方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

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

我知道我可以把课程名称等等,但是我很乐意试试这个,因为对我来说,**

看起来比这更干净：