如果你可以在选择器中链接类，那么nth-child和其他函数怎么不起作用？

So i was thinking: You can chain things in CSS such as:

所以我在想:你可以用CSS链接东西,比如:

#test.winning.button

but can it do something more complex like this:

但它可以做一些更复杂的事情:

div:nth-child(even):nth-last-child(1);

I mean, i know this can be done in jQuery by doing simply:

我的意思是,我知道这可以通过简单地在jQuery中完成:

$("div:nth-child(even)").last()

but didnt know if this is plausible with vanilla css.

但不知道这是否与香草css合理。

Here is a JSFiddle for dabbling that i was trying to test against. https://jsfiddle.net/au5f7djd/

这是一个JSFiddle for dabbling,我试图测试。 https://jsfiddle.net/au5f7djd/

1 个解决方案

#1

The example you link to doesn't work because:

您链接到的示例不起作用,因为:

div:nth-child(even):first-child{

The 1st child will always be odd. 1 is an odd number.

第一个孩子永远是奇怪的。 1是奇数。

div:nth-child(even):nth-last-child(1){

… will work if the 1st last child is even. This requires that you have an even number of children. The example you link to has 9 children, so the 1st last is currently an odd numbered one. Add or remove a div and it works.

......如果最后一个孩子是平等的,那就行了。这要求您拥有偶数个孩子。您链接的示例有9个子节点,因此第1个最后一个是奇数编号。添加或删除div,它的工作原理。

When you combine selectors you are looking for elements that match all the conditions. Counts still take all the elements into consideration, they don't just count within the previously matched group.

组合选择器时,您正在寻找符合所有条件的元素。计数仍然考虑所有因素,它们不仅仅计入先前匹配的组中。

#1