我可能是在回答我自己的问题,但我非常好奇。
我知道CSS可以选择父容器的各个子容器,但是如果父容器有一定数量的子容器,是否支持对子容器进行样式化。
例如
container:children(8) {
// style the parent this way if there are 8 children
}
我知道这听起来很奇怪,但我的经理让我去看看,我自己什么都没有发现,所以我决定在结束搜索之前转向so。
我可能是在回答我自己的问题,但我非常好奇。
我知道CSS可以选择父容器的各个子容器,但是如果父容器有一定数量的子容器,是否支持对子容器进行样式化。
例如
container:children(8) {
// style the parent this way if there are 8 children
}
我知道这听起来很奇怪,但我的经理让我去看看,我自己什么都没有发现,所以我决定在结束搜索之前转向so。
当前回答
根据Matt的解决方案,我使用了以下Compass/SCSS实现。
@for $i from 1 through 20 {
li:first-child:nth-last-child( #{$i} ),
li:first-child:nth-last-child( #{$i} ) ~ li {
width: calc(100% / #{$i} - 10px);
}
}
这允许您快速扩展项目的数量。
其他回答
不,在CSS中没有这样的东西。但是,您可以使用JavaScript来计算子元素的数量并应用样式。
根据Matt的解决方案,我使用了以下Compass/SCSS实现。
@for $i from 1 through 20 {
li:first-child:nth-last-child( #{$i} ),
li:first-child:nth-last-child( #{$i} ) ~ li {
width: calc(100% / #{$i} - 10px);
}
}
这允许您快速扩展项目的数量。
你可以像这样使用:has选择器:
.parent-element:has(:nth-child(8))
它选择子元素号为8的.parent-element类的元素。如果子数字8不存在,规则将不被应用。
不幸的是:has在firefox中默认不支持。您仍然可以使用它,并为firefox支持添加额外的棘手规则。
如果你使用的是类似reactJS的东西,你可以简单地添加一个类,然后设置它的样式。
例如,假设你正在显示一个数组中的项。
app.jsx
<div className={`items-count-is-${items.length}`}>
{items.map(item => {
return <li>...</li>;
})}
</div>
例如:CSS: items-count-is-5{…}
不。其实不是。有几个选择器可以使您接近,但可能在您的示例中不起作用,并且没有最好的浏览器兼容性。
:独生子女
only-child是少数几个真正的计数选择器之一,因为它只在元素的父元素有一个子元素时才被应用。用你理想化的例子,它的行为就像孩子(1)可能会做的那样。
:nth-child
n -child选择器可能会让你到达你想去的地方,这取决于你真正想要做什么。如果有8个子元素,你想对所有元素都设置样式,那你就不走运了。然而,如果你想要对第8个及以后的元素应用样式,试试这个:
p:nth-child( n + 8 ){
/* add styles to make it pretty */
}
不幸的是,这些可能不是你想要的解决方案。最后,您可能需要使用一些Javascript魔法来应用基于计数的样式——即使您要使用其中之一,在使用纯CSS解决方案之前,您也需要仔细考虑浏览器兼容性。
关于伪类的CSS3规范
编辑我对你的问题有一些不同的理解——有一些其他的方法来设置父对象的样式,而不是子对象。让我给你一些其他的选择器:
:空和:not
这将设置没有子元素的样式。它本身并不是很有用,但是当与:Not选择器配对时,你只能对有子元素进行样式化:
div:not(:empty) {
/* We know it has stuff in it! */
}
你无法计算这里有多少纯CSS的子选项,但它是另一个有趣的选择器,可以让你做很酷的事情。