HTML/CSS 如何使用自定义数据属性将 CSS 应用到 "a"？

Question

我已经知道如何将 CSS 应用于自定义数据属性，但在我的情况下它似乎不起作用。我不想通过 class 而是通过数据存储属性 select。

HTML

<a data-store="{&quot;dialogURI&quot;:&quot;\/messages\/compose\/dialog\/&quot;}" href="#"></a>

CSS

[data-store=" {&quot;dialogURI&quot;:&quot;\/messages\/compose\/dialog\/&quot;}"]{
position:fixed!important;
bottom:0px!important;
}

但是好像不行。任何帮助将不胜感激。

Answer 1

为什么不直接使用 class？按数据属性选择是一个非常糟糕的主意，尤其是在那种形式下。

.hello {
    position: fixed !important;
    bottom: 0px !important;
}

顺便说一句，你应该尽量避免 !important...

另见

~=

在你的 css 中。它允许在 rel 属性中使用空格。

Answer 2

您在 HTML 属性中看到的 " 是双引号的字符引用。它们在 CSS 属性选择器中表示为文字双引号，而不是 HTML 实体，因为 HTML 实体仅属于 HTML。由于该值包含双引号，请使用单引号分隔属性选择器中的值，这样您就不必在 in 值中对双引号进行转义。

属性值中的反斜杠需要转义，所以\变成了\。

您的属性选择器中还有一个任性的前导 space 应该删除。

因此：

[data-store='{"dialogURI":"\/messages\/compose\/dialog\/"}'] {
position:fixed!important;
bottom:0px!important;
}

正如其他人所提到的，如果该元素具有 class 并且您可以使用该 class 和一些上下文来识别该元素，那么这样做是一个更好的主意。但是，有问题的元素可能并不总是出现在相同的上下文中，或者可能不是唯一带有 class 的元素，并且您并不总是可以控制标记 — 因此使用属性并没有错选择器，如果您没有任何其他选项。

HTML/CSS 如何使用自定义数据属性将 CSS 应用到 "a"？

HTML/CSS How to apply CSS to "a" with custom data attribute?

html

css

css-selectors