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查找具有空属性的元素，并添加一个可以设置样式的类。
如果您可以修改服务器端代码以不同方式输出该属性，那么这是一条更容易的路径。

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

1 个答案: