html - CSS 选择器问题

Question

这是我的 html 代码:

<label for="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]" 
class="error" id="tx_alterneteducationcatalog_subscriberadd[newSubscriber]
[gender]-error">This field is required.</label>

这是我的CSS代码:

#tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]-error{
    display: none !important
}

由于某种原因， float 权利不起作用。即使在 firebug 中也没有显示我放置了一个 float:right !important。为什么？

Answer 1

选择器

#tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]-error

无效。方括号表示属性选择器，所以你拥有的是

#tx_alterneteducationcatalog_subscriberadd
[newSubscriber]
[gender]

... 紧随其后的是 -error 中的语法错误，因为那里不需要标识符。

如果你转义所有的方括号，整个ID选择器将被正确解析:

#tx_alterneteducationcatalog_subscriberadd\[newSubscriber\]\[gender\]-error

...但我更喜欢只使用属性选择器来匹配 ID:

[id="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]-error"]

您也可以通过 for 属性和 .error 类而不是 id 进行选择，但我不清楚为什么要进行验证错误将首先标记在 label 元素中。一方面，该文本完全没有说明它到底在“标记”哪个字段；它只是说它是必需的。

---

我刚刚注意到您的 id 属性中有一个换行符。如果这正是您的实际标记的显示方式，那么您的标记无效。话虽这么说，你仍然应该能够在你的 CSS 中使用转义序列 \a 来解释它(参见规范的 section 4.3.7):

#tx_alterneteducationcatalog_subscriberadd\[newSubscriber\]\a\[gender\]-error

[id="tx_alterneteducationcatalog_subscriberadd[newSubscriber]\a[gender]-error"]