HTML / CSS如何将CSS应用于“a”与自定义数据属性？ [英] HTML/CSS How to apply CSS to "a" with custom data attribute?

问题描述

我已经知道如何应用CSS到自定义数据属性，但在我的case它似乎不工作。

I already know how to apply CSS to custom data attributes but in my case it just doesn't seem to work. I don't want to select by class but by data-store attribute.

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;
}

但它似乎不工作。

推荐答案

& quot; 你在HTML属性中看到的是双引号的字符引用。它们在CSS属性选择器中表示为文字双引号，而不是HTML实体，因为HTML实体仅与HTML相关。由于值包含双引号，因此您可以使用单引号将属性选择器中的值分隔开，以便您不必在中转义中的双引号。

The "s you see in the HTML attribute are character references for double quotes. They are represented in a CSS attribute selector as literal double quotes, not the HTML entities, since HTML entities pertain to HTML only. Since the value contains double quotes, use single quotes to delimit the value in your attribute selector so you don't have to escape the double quotes in the value.

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

The backslashes in the attribute value need to be escaped, so \ becomes \\.

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

There is also a wayward leading space in your attribute selector that should be removed.

/ p>

Hence:

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

正如其他人所提到的，如果元素有一个类，元素使用该类和一些上下文，这是一个更好的主意。然而，有问题的元素可能不总是出现在相同的上下文中，或者可能不是唯一的类，并且你不总是有控制的标记 - 所以使用属性选择器没有错误，如果你don没有其他选项。

As mentioned by others, if the element has a class and you can identify that element using that class and some context, it's a better idea to do that. However, the element in question may not always appear in the same context or may not be the only one with the class, and you don't always have control over the markup — so there is nothing wrong with using an attribute selector if you don't have any other options.

这篇关于HTML / CSS如何将CSS应用于“a”与自定义数据属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！