1

我有这个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-”开头的类来设置所有输入字段的样式，但上面不起作用。有什么建议么？

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

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

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

4

2 回答 2

1

问题是您使用前缀匹配^=，这意味着它将匹配以类属性orderrow-的实际值开头的类属性（包括所有类名）的值，如果您想要通配符选择器，它会“触发 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;
}

重要的是要注意，因为属性选择器和 class 选择器具有相同的特性，您应该将 overribe放在属性下方，以确保样式的正确级联*（根据我的示例 - jsfiddle）。

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

docs查看三个不同通配符选择器的文档。

*我有时会编造词，但只要你明白我的意思......

于 2012-09-17T11:38:21.523 回答
0

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

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

于 2012-09-21T16:16:13.207 回答