blocks|key|1487937|text|您不能(使用CSS选择器)根据已应用于元素的CSS属性来选择元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1487938|如果您想手动完成此操作，您可以选择文档中的每个元素，循环遍历它们，并检查您感兴趣的属性的计算值(这可能只适用于真正的CSS属性，而不适用于rounded等虚构的属性)。它也会很慢。|offset|length|style|CODE|1487939|根据编辑进行更新-+group+selectors|1487940|$(".Title,+.Caption").corner();|code-block|syntax|javascript|1487941|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS21/selector.html#grouping^0|0|1X|7|0|A|F|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

You cannot (using a CSS selector) select elements based on the CSS properties that have been applied to them.

If you want to do this manually, you could select every element in the document, loop over them, and check the computed value of the property you are interested in (this would probably only work with real CSS properties though, not made up ones such as <code>rounded</code>). It would also would be slow.

Update in response to edits — <a href="http://www.w3.org/TR/CSS21/selector.html#grouping" rel="noreferrer">group selectors</a>:

<pre><code>$(".Title, .Caption").corner();
</code></pre>

blocks|key|1273506|text|这是一个两年前的线程，但它对我仍然有用，所以它可能对其他人也有用。这就是我最终要做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1273507|var+x+=+$('.myselector').filter(function+()+{+
++++return+this.style.some_prop+==+'whatever'+
});|code-block|syntax|javascript|1273508|不像我希望的那样简洁，但我从来没有需要过这样的东西，除了现在，而且在我看来，它对于一般用途来说也不是很有效。|1273509|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is a two year old thread, but it was still useful to me so it could be useful to others, perhaps. Here's what I ended up doing:

<pre><code>var x = $('.myselector').filter(function () { 
 return this.style.some_prop == 'whatever' 
});
</code></pre>

not as succinct as I would like, but I have never needed something like this except now, and it's not very efficient for general use anyway, as I see it.

blocks|key|1273562|text|谢谢你，碧珠。我使用了您的解决方案，但使用了jQuery+.css而不是纯javascript，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1273563|var+x+=+$('*').filter(function()+{
++++return+$(this).css('font-family').toLowerCase().indexOf('futura')+>+-1
})|code-block|syntax|javascript|1273564|本例将选择font-family属性值包含"Futura“的所有元素。|offset|length|style|CODE|1273565|entityMap^0|0|0|5|B|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Thank you, Bijou. I used your solution, but used the jQuery .css instead of pure javascript, like this:

<pre><code>var x = $('*').filter(function() {
 return $(this).css('font-family').toLowerCase().indexOf('futura') &gt; -1
})
</code></pre>

This example would select all elements where the <code>font-family</code> attribute value contains "Futura".

blocks|key|1488256|text|自定义CSS属性不是继承的，因此必须直接应用于每个元素(即使使用js动态添加属性，也应该通过添加类来实现)，因此...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1488257|CSS|1488258|.Title
{
++++color:red;
}

.Caption
{
++++color:black;
}|code-block|syntax|javascript|1488259|HTML|1488260|您根本不需要定义四舍五入:true属性。只需使用“四舍五入”类：|1488261|<div+class='Title+Rounded'><h1>Title</h1></div>
<div+class='Caption+Rounded'>Caption</div>|1488262|JS|1488263|jQuery(+'.Rounded'+).corner();|1488264|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Custom CSS properties aren't inherited, so must be applied directly to each element (even if you use js to dynamically add properties, you should do it by adding a class), so...

CSS

<pre><code>.Title
{
 color:red;
}

.Caption
{
 color:black;
}
</code></pre>

HTML

You don't need to define a rounded:true property at all. Just use the presence of the 'Rounded' class:

<pre><code>&lt;div class='Title Rounded'&gt;&lt;h1&gt;Title&lt;/h1&gt;&lt;/div&gt;
&lt;div class='Caption Rounded'&gt;Caption&lt;/div&gt;
</code></pre>

JS

<pre><code>jQuery( '.Rounded' ).corner();
</code></pre>

How can I select all elements that have a specific CSS property applied, using jQuery? For example:

<pre><code>.Title
{
 color:red;
 rounded:true;
}

.Caption
{
 color:black;
 rounded:true;
}
</code></pre>

How to select by property named "rounded"?

CSS class name is very flexible.

<pre><code>$(".Title").corner();
$(".Caption").corner();
</code></pre>

How to replace this two operation to one operation. Maybe something like this:

<pre><code>$(".*-&gt;rounded").corner();
</code></pre>

Is there any better way to do this?

Select all elements that have a specific CSS, using jQuery

jQuery

如何使用jQuery选择所有应用了特定CSS属性的元素？例如：.Title{    color:red;    rounded:true;}.Caption{    color:black;    rounded:true;}如何按取整属性进行选择？CSS类名非常灵活。$(".Title").corner();$("....

问使用jQuery选择具有特定CSS的所有元素
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery选择具有特定CSS的所有元素EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery选择具有特定CSS的所有元素
EN