html - 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 选择器（获取具有占位符标题且输入具有等于“x”的“title”属性的任何项目）生效。

score 5 · Accepted Answer

两个错误：

有一个=在font-style=normal;应该有一个的地方:
[placeholder]不应该是 before input[role="x"]，您完成它的方式匹配具有属性的元素，该元素placeholder包含input具有属性的元素role="x"

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

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

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

score 3 · Accepted Answer

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

希望能帮助到你。

score 1 · Accepted Answer

您需要将选择器更改为

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

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

3 回答 3