Html 兄弟姐妹的CSS检测因子
所以我已经能够,但是我还没有找到一种方法来根据兄弟姐妹的总数只选择最后几个元素 在下面的代码片段中,我通过添加类实现了我想要的目标。但如果可能的话,我想用CSS选择器来实现这一点。在下面的代码段中,每个“组”有2行,一行定义为3个元素。我想在不添加类的情况下选择下面代码段中所示的橙色元素。选择最后一行中的元素或选择除最后一行中的元素以外的所有元素Html 兄弟姐妹的CSS检测因子,html,css,css-selectors,Html,Css,Css Selectors,所以我已经能够,但是我还没有找到一种方法来根据兄弟姐妹的总数只选择最后几个元素 在下面的代码片段中,我通过添加类实现了我想要的目标。但如果可能的话,我想用CSS选择器来实现这一点。在下面的代码段中,每个“组”有2行,一行定义为3个元素。我想在不添加类的情况下选择下面代码段中所示的橙色元素。选择最后一行中的元素或选择除最后一行中的元素以外的所有元素 ul{ 左侧填充:0; } ul:之后{ 内容:''; 显示:表格; 明确:两者皆有; } 李{ 背景色:#EFEF; 边框:1件带点#000; 框
ul{
左侧填充:0;
}
ul:之后{
内容:'';
显示:表格;
明确:两者皆有;
}
李{
背景色:#EFEF;
边框:1件带点#000;
框大小:内容框;
浮动:左;
列表样式类型:无;
填充:10px0;
文本对齐:居中;
宽度:33%
}
阿尔特先生{
背景颜色:橙色;
}
- 一,
- 二,
- 三,
- 4
- 一,
- 二,
- 三,
- 4
- 5
- 一,
- 二,
- 三,
- 4
- 5
- 6
由于第n个孩子可以接受公式,因此您可以使用与您所引用的其他问题相同的技术对任意数量的元素执行此操作
ul{
左侧填充:0;
}
ul:之后{
内容:'';
显示:表格;
明确:两者皆有;
}
李{
背景色:#EFEF;
边框:1件带点#000;
框大小:内容框;
浮动:左;
列表样式类型:无;
填充:10px0;
文本对齐:居中;
宽度:33%
}
/*最后一行有3个元素*/
李:第一个孩子:第n个最后一个孩子(3n+0)~李:第n个最后一个孩子(1),
李:第一个孩子:第n个最后一个孩子(3n+0)~李:第n个最后一个孩子(2),
李:第一个孩子:第n个最后一个孩子(3n+0)~李:第n个最后一个孩子(3),
/*最后一行有2个元素*/
李:第一个孩子:第n个最后一个孩子(3n+2)~李:第n个最后一个孩子(1),
李:第一个孩子:第n个最后一个孩子(3n+2)~李:第n个最后一个孩子(2),
/*最后一行中有1个元素*/
李:第一个孩子:第n个最后一个孩子(3n+1)~李:第n个最后一个孩子(1){
背景颜色:橙色;
}
- 一,
- 二,
- 三,
- 四,
- 一,
- 二,
- 三,
- 四,
- 五,
- 一,
- 二,
- 三,
- 四,
- 五,
- 六,
- 一,
- 二,
- 三,
- 四,
- 五,
- 六,
- 七,
- 八,
- 九,
- 十,
- 十一,
- 十二,
- 十三,
:最后一个子项
css选择器?css无法检测子项的数量或它们在列表中的位置。它只能根据选择器设置样式。如果你能做到这一点,你可能会有机会。你能澄清一下你试图做什么的确切逻辑吗?@torazaburo:如果这个问题与我之前看到的问题类似(我还在寻找),那么它就是问如何匹配最后一行中的元素,而不管该行中实际有多少元素。因此,如果每行最多有三个元素,那么如果最后一行也有三个元素,则匹配最后三个元素;如果最后一行只有两个元素,则仅匹配最后两个元素;如果最后一行只有一个元素,则仅匹配最后一个元素。这个问题的答案完全取决于每行中元素的数量——以及这个数字是预先知道的这一事实。@BoltClock感谢您的澄清,但我仍然有一个理解它的思维障碍。在这种情况下,“行”是什么?虽然这可能会解决所提出的问题,但您能否解释您发布的CSS如何解决该问题,这样OP和未来的访问者就能够学习一种或多种技术来解决他们自己未来的问题(无需——必然——必须——返回更多的黑盒代码来解决下一个类似问题):@DavidThomas,我真的无法比最初的链接问题解释得更好,但我已经尝试过了。你要么得到,要么不得到(然后花很长时间阅读文档以了解选择器是如何工作的)。你现在添加的解释听起来很合理。读者注意,“以类似的方式,li:第一个孩子:第n个最后一个孩子(3n+0)意味着父母必须有一个3的倍数的孩子。”这意味着必须事先知道每行的孩子数(或系数)才能起作用。