CSS选择器不匹配

Question

对于以下HTML + CSS（http://jsfiddle.net/Gb3dh/1/）：

<input class="a" placeholder="here"/>
<input class="b" role="x" placeholder="there"/>

...

.a, .b {
    font-style: italic;
}

[placeholder] input[role="x"] {
    font-style=normal;
}

为什么“class = b”的“font-style”输入斜体？我希望第二个CSS选择器（获取具有占位符标题的任何项目以及输入的“title”属性等于“x”）将生效。

Answer 1

两个错误：

• =中有一个font-style=normal;，其中应该有:
• [placeholder]不应该在input[role="x"]之前，您完成它的方式与属性placeholder的元素匹配，该元素包含属性为{{1的input元素}}

请参阅更新的JSFiddle（或以下代码）：http://jsfiddle.net/Gb3dh/5/

role="x"

Answer 2

应该是input[role="x"][placeholder]，您当前的选择器会匹配具有input[role="x"]属性的元素中的元素[placeholder]。

希望它有所帮助。

Answer 3

您需要将选择器更改为

input[placeholder][role="x"] {
    font-style=normal;
}

您的选择器表示属性为role="x"的输入，该属性位于具有属性placeholder的元素内