HTML / CSS如何将CSS应用于＆＃34; a＆＃34;使用自定义数据属性？

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属性中使用空格。