我有一个 Web 应用程序,需要使用 CSS 文件来操作某些元素。 CSS 类包含方括号和其他特殊字符。至少chrome似乎不直接接受它们。
<div class="profileElement profile[~redString]">123</div>
这门课有效吗?有没有办法使用类名?我想:
.profile[~redString]{
color: red; }
当我用反斜杠转义 ~ 时,chrome 允许我将其注入(F12 -> 元素 -> 右上角的加号)到页面,但将 css 显示为灰色,这意味着该类在页面中不存在。
该类有效吗?
如果是这样,我将如何使用它?
这门课有效吗?
这取决于您要验证的内容。
profile[~redString]
是一个有效的 HTML 类名,例如将标记放入验证器 http://validator.nu.
然而,.profile[~redString]
不是有效的 CSS 选择器,因为~
正如您所发现的,它是一个特殊符号,并且它不在 CSS 解析器期望的位置。当你逃避它时,你会得到
.profile[\~redString]
这是一个有效的选择器,但具有完全不同的含义。它代表一个带有类名的元素profile
,以及一个名为~redString
。确实如此not表示一个元素,其类名恰好是profile[~redString]
.
要匹配此元素,您还需要转义方括号。这将导致整个字符流被视为单个标识符:
.profile\[\~redString\]
或者,您可以使用属性选择器来使事情变得更清晰:
[class~="profile[~redString]"]
注意~=
在这个CSS2.1属性选择器 http://www.w3.org/TR/CSS21/selector.html#attribute-selectors,其工作方式与类选择器类似。
查看两个选择器的运行情况:
:first-child.profile\[\~redString\],
:last-child[class~="profile[~redString]"] {
color: red;
}
<div>
<div class="profileElement profile[~redString]">123</div>
<div class="profileElement profile[~redString]">456</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)