将类选择器与属性选择器结合使用

Question

我有以下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;
}

我是否正确使用了这个，如果没有，怎么样？

Answer 1

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

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

JS Fiddle demo

Answer 2

您正在使用[class*="large-"] attribute selector ，因此您无需使用period(.)即类选择器在这里。只需写下这个

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

JS Fiddle Demo

Answer 3

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

这似乎有用

Answer 4

试试这个：

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