如何通过其部分类名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

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

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

<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和-large.

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

绝对不会推荐它.

原文地址：https://www.jb51.cc/css/215383.html