可以将CSS选择器传递给jQuery函数,例如:
jQuery('h1 + h2');
jQuery的也有一些过滤器,如:even和:odd:
jQuery('tr:even');
我正在寻找某种语法规则来区分这两种规则并且我在想,也许jQuery过滤器总是使用a :.
但是,一些CSS选择器也使用了:.例如:
:last-child:root:empty:target有没有人知道它是CSS选择器还是正在使用的jQuery过滤器？
我有一堆div:
<div>
<div class="meat">Some stuff</div>
<div class="meat">Some stuff</div>
<div class="meat">Some stuff</div>
<div class="meat">Some stuff</div>
<div class="dairy">Some stuff</div>
<div class="dairy">Some stuff</div>
<div class="dairy">Some stuff</div>
</div>
我需要设置每个类的第一个样式,并且无法控制html ...最好是纯CSS,但jQuery也可以.
我怎么能测试CSS1-3选择器来检查它们是否得到了正确的元素,例如使用JavaScript(也许是jQuery)？
是否有一个CSS选择器用于具有类的子项的第一个实例？例如,请使用以下代码:
<div id="container">
<div class="nothing">
</div>
<div class="child"> <!-- SELECT THIS ONE -->
</div>
<div class="child"> <!-- NOT THIS ONE -->
</div>
<div class="child"> <!-- NOT THIS ONE -->
</div>
</div>
是否有一个css选择器来设置第一次出现div类"child"的样式？
我有以下html,我想只显示第一个".xpto"元素.我的问题是我正在动态删除类.xpto,所以当我这样做时,第一个.xpto元素将是第二个内部div.我怎么能做到这一点？
<div>
<div class="xpto"></div>
<div class="xpto"></div>
<div class="xpto"></div>
<div class="xpto"></div>
</div>
我试过,:第一个孩子,:第一个类型和:nth-child(1n)但没有任何效果.有任何想法吗？(仅限CSS)
我想隐藏(display:none)带有.leftAddress类的第一个div
这是css
fieldset .leftAddress:first-of-type{
display:none;
}
这是html
<fieldset>
<div class="alert forward"><span class="coming"><strong>NOTE:</strong></span> A maximum of 5 address book entries allowed.</div>
<div class="leftAddress">Any</div>
<div class="leftAddress">
<!--Insert-->
<h3 class="addressBookDefaultName">Harry Testing</h3>
</div>
<div class="leftAddress">
<!--Insert-->
<h3 class="addressBookDefaultName">Heba ElZany</h3>
</div>
<div class="leftAddress">
<!--Insert-->
<h3 class="addressBookDefaultName">Yamen Shahin (primary address)</h3>
</div>
<div class="leftAddress">
<!--Insert-->
<h3 class="addressBookDefaultName">Yamen2 Shahin2</h3>
</div>
<div class="leftAddress">
<!--Insert-->
<h3 class="addressBookDefaultName">Yamen3 Shahin3</h3>
</div>
</fieldset>
正如你所看到的那样:first-of-type,但它似乎无法正常工作.我在这里错过了什么？我也尝试过:nth-of-type(1)http://jsfiddle.net/arns7/4/它不起作用.所以这个解决方案对我来说不适用于带有类的第一个元素的CSS选择器
我有aside两个<div class="sku">元素.我正在尝试使用CSS来操纵:first-child它,但它不起作用.但是,当试图访问:last-child它时.
HTML
<aside>
<h1>Product Name</h1>
<div class="sku">
<h3>
100 – Small
</h3>
<div class="dimension">
<ul>
<li>
<span class="title">
Product Dimensions
</span>
<span class="specs">
23.75w
x
17.75h
x
28d
</span>
</li>
</ul>
</div>
</div>
<div class="sku">
<h3>
200 – Large
</h3>
<div class="dimension">
<ul>
<li>
<span class="title">
Product Dimensions
</span>
<span class="specs">
29.75w
x
17.75h
x
28d
</span>
</li>
</ul>
</div>
</div>
</aside>
CSS
.sku:first-child {
display:none !important; /*doesn't hide the …我正在寻找一种CSS(没有JS)的方式来忽略第n个子计数中的隐藏元素.这可能吗？
我有这个HTML:
<div class="gallery-item"><img src="http://placehold.it/150x150"></div>
<div class="gallery-item"><img src="http://placehold.it/150x150"></div>
<div class="gallery-item empty"></div>
<div class="gallery-item"><img src="http://placehold.it/150x150"></div>
<div class="gallery-item empty"></div>
<div class="gallery-item"><img src="http://placehold.it/150x150"></div>
<div class="gallery-item"><img src="http://placehold.it/150x150"></div>
我正在尝试定位每个非空的画廊项目,但这不起作用:
.gallery-item:not(.empty):nth-child(2n) {}
我不想使用JS,因为这是一个复杂的站点,有很多断点,我不想为这个基本的东西添加onresize监听器.
我有以下标记和样式:
[class^="container"] .target:last-of-type {
color:red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="target">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<br>
<div class="container-2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="target">5</div>
</div>
</body>
</html>我想选择.target元素,但前提是它是容器中的最后一个元素.
这个:last-of-type类在这种情况下工作,我只是不明白为什么.它不应该突出这两个.target元素吗？它们是父容器中的最后一个(也是唯一的)元素.或者我误解了:last-of-type选择器？
是否有可能首先li在内部具有特定类ul？例如 :
<ul>
<li class="a"></li> <!-- I want to target this li -->
<li class="a"></li>
<li class="a"></li>
<li class="b"></li> <!-- and this li -->
<li class="b"></li>
<li class="b"></li>
</ul>
有可能吗？