css找某个元素的下个子元素,CSS可以检测一个元素有多less个子元素？

注：这个解决scheme将返回一定长度的子集，而不是你所要求的父元素。希望它仍然有用。

安德烈·路易斯提出了一个方法： http : //lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/不幸的是，它只适用于IE9及以上。

本质上，你将nnth-child()与其他处理元素位置的伪类结合起来。这种方法允许您从具有特定长度的元素集合中指定元素。

例如:nth-child(1):nth-last-child(3)匹配集合中的第一个元素，同时也是集合的结尾的第三个元素。这样做有两个方面：保证集合只有三个元素，而我们有三个元素中的第一个元素。要指定三个元素集的第二个元素，我们使用:nth-child(2):nth-last-child(2) 。

示例1 – 如果set包含三个元素，则select所有列表元素：

li:nth-child(1):nth-last-child(3), li:nth-child(2):nth-last-child(2), li:nth-child(3):nth-last-child(1) { width: 33.3333%; }

来自Lea Verou的示例1替代scheme ：

li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33.3333%; }

示例2 – 使用三个列表元素指定集合的最后一个元素：

li:nth-child(3):last-child { /* I'm the last of three */ }

例2替代：

li:nth-child(3):nth-last-child(1) { /* I'm the last of three */ }

示例3 – 以四个列表元素为目标的第二个元素：

li:nth-child(2):nth-last-child(3) { /* I'm the second of four */ }

css找某个元素的下个子元素,CSS可以检测一个元素有多less个子元素？相关推荐

css里给文字加下划线代码,css添加文字下划线样式的方法
css添加文字下划线样式的方法发布时间:2020-08-31 13:54:27 来源:亿速云阅读:65 作者:小新这篇文章将为大家详细讲解有关css添加文字下划线样式的方法,小编觉得挺实用的,因 ...
css Table布局：基于display:table的CSS布局
两种类型的表格布局你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
在linux中删除多级目录,如何使用一个Linux命令删除多个子目录 | MOS86
如果要使用Linux中的命令行删除另一个目录中的几个子目录,通常您必须多次使用rm命令.但是,有一个更快的方式来做到这一点. 说的我们有一个名为htg的目录,其中有五个子目录,我们要删除其中的三个目录 ...
css找某个元素的下个子元素,css判断某元素的子元素个数并分别设置样式的方法...
工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决,不过个人认为用css解决可能更简单一点.这也正好加深了我对css选择器的理解和运用. demo如下: 效果 ...
动画延迟效果css,每个子元素都有延迟的CSS动画
每个子元素都有延迟的CSS动画我试图通过将动画应用于每个子元素来创建级联效果. 我想知道是否有比这更好的方法: .myClass img:nth-child(1){ -webkit-animatio ...
js 兼容性封装获取第一个子元素，最后一个子元素，下一个兄弟元素，上一个兄弟元素
高级浏览器: chrome firefox ie9及以上符合web标准浏览器. 低版本浏览器: ie6,ie7,ie8. 节点和元素的适用范围:以firstChild和firstElementChil ...
css伪元素实现下划线
前言: css伪元素实现下划线效果,用一个border-bottom+伪元素实现双重下划线效果效果图: 实现代码: .titleT{position: relative;font-size: 28p ...
html 内联块级元素，浏览器内核，css继承性
块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...
php 元素添加子元素,css,html_怎么在添加的子元素上继承父元素上已存在的子元素的属性？，css,html,javascript - phpStudy...
怎么在添加的子元素上继承父元素上已存在的子元素的属性? 请问如何使添加后的子元素(tr)也能在鼠标经过前后继续保留其存在的子元素上的属性? dom的基础应用 window.οnlοad=functio ...

css找某个元素的下个子元素,CSS可以检测一个元素有多less个子元素？

css找某个元素的下个子元素,CSS可以检测一个元素有多less个子元素？相关推荐

最新文章

热门文章