CSS Attribute Selector : Apply class if custom attribute has value? 另外，它能在 IE7+ 中工作吗？

Question

我想使用 CSS 属性选择器将类应用于某些范围，但前提是它们有内容。我有一个自定义属性，只有在跨度有内容时才会有一个值:“entityvalue”。使用下面的 CSS 时，它不会将该类应用于任何元素，即使 entityvalue='1634' 在 HTML 中也是如此。

.ApplicationName[entityvalue="*"]  {
                 display: inline;
                 background-image: url("../images/icon_application.PNG");
                 background-repeat: no-repeat;
                 background-position: left;
                 padding-left: 12px;
                 }

我尝试了一些网站上的 .ApplicationName[entityvalue!=""] 但显然它不符合 CSS 标准(在 Chrome 中不起作用)，这真的很糟糕，因为 .ApplicationName[entityvalue=""] 与我需要的完全相反...

以下是带有内容的 span/div(应设置样式)和不带内容的 span/div(不应设置样式)的示例:

<div class="ApplicationName Redirect" entitytype="Application" entityvalue=""></div>

<div class="ApplicationName Redirect" entitytype="Application" entityvalue="1234">Microsoft Outlook</div>

Answer 1

省略值部分:

.ApplicationName[entityvalue]

这适用于 IE7+。

如果您对 entityvalue 被设置为空感到疑惑，并且不想包含这些元素:

.ApplicationName[entityvalue]:not([entityvalue=""])

这不适用于 IE7+。

如果您确实需要满足这一点，那么，您有一些选择:

• 为 .ApplicationName[entityvalue=""] 定义覆盖/重置样式，因此您有一条规则与上面的第一个选择器有关，另一个规则与此选择器有关。

• 使用 JavaScript 查找具有空属性的元素并添加一个您可以设置样式的类。

• 如果您可以修改服务器端代码以不同方式输出该属性，那将是一条更容易采用的途径。