HTML/CSS 如何将 CSS 应用于具有自定义数据属性的"a"？

Question

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

HTML

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

CSS

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

但它似乎不起作用。如有任何帮助，我们将不胜感激。

Answer 1

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

属性值中的反斜杠需要转义，因此变为\。

属性选择器中还有一个任性的前导空格，应该删除。

因此：

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

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

Answer 2

为什么不直接使用该类？通过数据属性进行选择是一个非常糟糕的主意，尤其是在这种形式下

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

顺便说一句，你应该尽量避免！重要的

另请查看

~= 

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