CSS属性选择器：如果自定义属性有值，应用类？此外，它将工作在IE7 +？ [英] CSS Attribute Selector: Apply class if custom attribute has value? Also, will it work in IE7+?

问题描述

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

I'd like to use CSS Attribute Selector to apply a class to some spans, but only if they have content. I have a custom attribute that will only have a value if the span has content: "entityvalue". When using the CSS below, it does not apply the class to any elements, even if "entityvalue='1634'" in the 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 =]完全相反的我需要...

I tried .ApplicationName[entityvalue!=""] as found on some sites but apparently it's not in the CSS standards (doesn't work in Chrome) which really sucks, because .ApplicationName[entityvalue=""] does exactly the opposite of what I need...

这里是span / div WITH内容（应该是样式）和span / div WITHOUT内容（不应该设置样式）的示例：

Here are examples of a span/div WITH content (that should be styled) and a span/div WITHOUT content (which should NOT be styled):

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

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

推荐答案

忽略值部分：

.ApplicationName[entityvalue]

这适用于IE7 +。

如果你对 entityvalue 设置为空，不想包含这些元素：

If you're paranoid about entityvalue being set to emptiness, and you don't want to include those elements:

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

这不适用于IE7 +。

This does not work with IE7+.

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

• Define an override/reset style for .ApplicationName[entityvalue=""], so you have one rule with the first selector above, and another rule with this one.

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

Use JavaScript to look for elements with the empty attribute and add a class which you can style.

如果可以将服务器端代码

If you can modify server-side code to output that attribute differently, that's an even easier route to take.

这篇关于CSS属性选择器：如果自定义属性有值，应用类？此外，它将工作在IE7 +？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！