高级 CSS 选择器 - 根据样式选择

Question

除了性能问题，是否可以使用样式作为选择器？例如，类似于：

div[background-image="img/someimg.jpg"] {opacity:.5}

我的后备计划是使用 javascript 并遍历 div（找到时添加一个类），但鉴于页面高度动态，而且我无法控制添加的 div ，这最终可能会更加昂贵。

Answer 1

即使有很多的样式，您可以使用星号看到做到这一点在这里，所以这段代码：

div[style*="box-sizing: border-box;"] {
   background-color: #ffffe0;
}

很容易匹配这个 HTML：

<div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, " courier="" new",="" monospace;="" font-size:="" 12px;="" color:="" rgb(51,="" 51,="" 51);="" border-top-left-radius:="" 4px;="" border-top-right-radius:="" border-bottom-right-radius:="" border-bottom-left-radius:="" background-color:="" rgb(251,="" 250,="" 248);="" border:="" 1px="" solid="" rgba(0,="" 0,="" 0.14902);="" background-position:="" initial="" initial;="" background-repeat:="" initial;-en-codeblock:true;"=""><div><font style="font-size: 14px;"><span style="line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(54, 86, 138);">func</span><span style="line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(0, 0, 0);"> doThis(thing: </span><span style="line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(195, 89, 0);">AnyObject</span><span style="line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(0, 0, 0);">) {</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">}</span></font></div>
<div><font style="font-size: 14px;"><br></font></div>
<div><font style="font-size: 14px;"><span style="font-variant-caps: normal; line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(54, 86, 138);">func</span><span style="font-variant-caps: normal; line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(0, 0, 0);"> doThisThing(thing thing: </span><span style="font-variant-caps: normal; line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(195, 89, 0);">AnyObject</span><span style="font-variant-caps: normal; line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(0, 0, 0);">) {</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">}</span></font></div></div>

Answer 2

从W3C 属性页面：

CSS 2.1 允许作者指定匹配具有源文档中定义的某些属性的元素的规则。

属性是 HTML 代码本身定义的东西，如id、class、src、href等：

<a id="foo" href="bar">Foo</a>

除非您在属性中专门定义了样式style，如下所示：

<div style="background-image: url('img/someimg.jpg');">Foo</div>

你不能用 CSS 做任何事情。

如果你确实是内联的，你可以尝试这个选择器：

div[style="background-image: url('img/someimg.jpg');"]
{
  /* ... */
}

既然您担心性能，您可以尝试使用纯 JS 来执行此操作（未经测试）：

var divs = document.getElementsByTagName('div');

for (var i = 0; i < divs.length; i++)
{
  var current = divs[i];

  if (current.style.backgroundImage == "url('img/someimg.jpg')")
  {
    current.style.opacity = 0.5; // You'll need more hacks for IE...
  }
}