CSS属性选择器:如果自定义属性有值,则应用类？另外,它会在IE7 +中运行吗？

Question

我想使用CSS属性选择器将类应用于某些跨度,但前提是它们有内容.我有一个自定义属性,如果span包含内容,则只有一个值:"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 WITH内容(应该设置样式)和span/div WITHOUT内容(不应该设置样式)的示例:

<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查找具有空属性的元素,并添加一个可以设置样式的类.

• 如果您可以修改服务器端代码以不同方式输出该属性,那么这是一个更容易的路径.