高级 CSS 选择器 - 基于样式选择

Question

抛开性能问题不谈，是否可以将样式用作选择器？例如，类似：

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

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

Answer 1

在这种情况下，我建议操作 CSS 类而不是单个样式。例如：

div.some-img
{
    background-image: url('img/someimg.jpg');
}

div.some-img-fade
{
    opacity: 5;
}

......

$('div.some-img').each(function() { $(this).addClass('some-img-fade'); });

Answer 2

来自W3C page on Attributes：

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...
  }
}

Answer 3

即使有很多样式，你也可以使用here中看到的星号来做到这一点，所以这段代码：

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 4

有一个叫做 DOMSubtreeModified 的东西现在已经变成了MutationObserver。这可以帮助您观察 dom 何时添加新元素：

// identify an element to observe
var elementToObserve = document.querySelector("#targetElementId");

// create a new instance of `MutationObserver` named `observer`, 
// passing it a callback function
var observer = new MutationObserver(function() {
    console.log('callback that runs when observer is triggered');
});

// call `observe` on that MutationObserver instance, 
// passing it the element to observe, and the options object
observer.observe(elementToObserve, {subtree: true, childList: true});

此示例复制/粘贴自 mdn 文档：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe