CSS 属性选择器 : Apply class if custom attribute has value? 另外，它可以在 IE7+ 中使用吗？

我想使用 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>

最佳答案

省略值部分:

.ApplicationName[entityvalue]

这适用于 IE7+。

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

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

这不适用于 IE7+。

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

为 .ApplicationName[entityvalue=""] 定义一个覆盖/重置样式，所以你有一个规则与上面的第一个选择器，另一个规则与这个。

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

如果您可以修改服务器端代码以不同的方式输出该属性，那将是一条更简单的路线。