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/

但绝对不会推荐它。

Answer 2

如果你分类你的类名，那么你可以使用CSS选择器只抓取一个包含两个类的元素，而不是依赖于通配符，如下所示：

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

.mybuttons-button.large {
    font-size: 120%
}

请记住“.class1.class2”与“.class1 .class2”（带空格）不同：第一个查找带有BOTH类的元素;第二个查找class1的后代，即class2。

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

2 个答案: