19

我有以下 HTML：

<a href="somelink.htm" class="button columns large-6">wide button</a>
<a href="somelink.htm" class="button columns large-3">narrow button</a>

我尝试使用属性选择器并将其与button类结合，但它没有按预期工作。

.button.[class*="large-"] {
    font-size: 0.9em;
}

我是否正确使用它，如果没有，如何？

4

4 回答 4

21

您不需要第二个句点，与 JavaScript 不同的[class*="large-"]是，它不会编译为返回找到的字符串，它只是按原样评估：

.button[class*="large-"] {
    font-size: 0.9em;
}

JS 小提琴演示。

于 2013-10-21T15:31:48.007 回答
2

您正在使用属性选择器，[class*="large-"]因此您不需要在此处使用period(.)ie类选择器。只需简单地写这个

.button[class*="large-"] {
    font-size: 0.9em;
    color:red;
}

JS 小提琴演示

于 2013-10-21T15:34:14.207 回答
2 
.button[class*="large-"] {
   font-size: 0.9em;
}

<a href="somelink.htm" class="button columns large-6">wide button</a>
<a href="somelink.htm" class="button columns large-3">narrow button</a>
<a href="somelink.htm" class="button columns large">narrow button</a>
<a href="somelink.htm" class="large-2">narrow button</a>

这似乎有效

于 2013-10-21T15:40:32.450 回答
0

尝试这个：

a.button[class*=large] {
 font-size: 0.9em;
}
于 2013-10-21T15:31:55.053 回答