我正在创建几个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/
绝对不会推荐它.
