Question

除了性能问题之外，是否可以将样式用作选择器？例如，像：

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

我的后备计划是使用javascript并迭代div（在找到时添加一个类），但这可能最终甚至更多昂贵，因为页面是高度动态的，我是不能控制被添加的div。

Answer 1

来自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');"]
{
  /* ... */
}

现在你担心性能，你可以尝试使用pure-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 2

我建议在这种情况下操纵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 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

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

4 个答案: