Question

我有这个HTML：

<div>
    <input class="orderrow-1" type="text"></input>
    <input class="orderrow-2" type="text"></input>
</div>

和这个css：

input[class^='orderrow-']
{
    border: 1px solid #e2e2e2;
    color: #333;
    font-size: 1em;
    margin: 5px 5px 6px 0px;
    padding: 5px;
    width: 100px;
    text-align: right;
}

我尝试使用以'orderrow-'开头但以上不起作用的类来设置所有输入字段的样式。有什么建议吗？

编辑：对不起，上面的确有效。问题是我有两个casses。像这样：

<div>
    <input class="trigger orderrow-1" type="text"></input>
    <input class="trigger orderrow-2" type="text"></input>
</div>

当orderrow-1之前有东西时，选择器不起作用。想法？

Answer 1

问题是你使用前缀匹配^=这意味着它将匹配以orderrow-开头的class属性（包括所有类名）的值class属性的实际值它'触发orderrow-2'，如果你想要一个通配符选择器，规范推荐这个：*=它会在任何点查找包含字符串的值。

示例：

input[class ^="orderrow-"], input[class *=" orderrow-"]
{
    border: 1px solid #e2e2e2;
    color: #333;
    font-size: 1em;
    margin: 5px 5px 6px 0px;
    padding: 5px;
    width: 100px;
    text-align: right;
}

input.orderrow-1 {
    border: 1px solid #F00;
}

重要的是要注意，因为属性选择器和clas选择器具有相同的特异性，所以应该将overribe 置于属性下以确保样式的正确级联*（根据我的示例 - {{ 3}}）。

编辑：根据评论在示例中使用更精确的选择器。

jsfiddle查看三种不同通配符选择器的文档。

*我有时补充单词，但只要你理解我的意思......

Answer 2

应该可以在这里查看各种css3伪类的代码笔测试http://codepen.io/jamiepaterson/pen/cADfs

您想要的是此测试中的紫色文字颜色。

我无法在CSS3中使用通配符

2 个答案: