北京网站建设有哪些浩森宇特,wordpress鼠标悬停图片,西蔵自治区建设厅网站,代理做网站怎么样CSS的伪类选择器:nth-child()
CSS的伪类选择器 :nth-child() 是一个非常强大的工具#xff0c;它允许你根据元素在其父元素中的位置#xff08;序数#xff09;来选择特定的子元素。这个选择器可以应用于任何元素#xff0c;并且可以与类型选择器、类选择器或ID选择器结合…CSS的伪类选择器:nth-child()
CSS的伪类选择器 :nth-child() 是一个非常强大的工具它允许你根据元素在其父元素中的位置序数来选择特定的子元素。这个选择器可以应用于任何元素并且可以与类型选择器、类选择器或ID选择器结合使用。
:nth-child() 选择器接受一个参数该参数可以是整数、关键字even 或 odd或公式如 anb。
正整数直接选择第n个子元素。不能为负数, 不能倒数 例如 p:nth-child(2) 选择每个父元素中的第二个 p 子元素。th:nth-child(66)选择第66个th不能用 nth-child(-1)选择倒数第一 关键字even 选择偶数子元素odd 选择奇数子元素。例如tr:nth-child(even) 选择表格中的偶数行。 even 等效 2nodd 等效 2n1 公式使用形如 anb 的公式来选择元素。 a是整数。b是正整数, a可正负, b只能正, an可以理解为步长, 正数n就是向后, 负数n就是向前, 零n如同省略n 例如 :nth-child(0n1)等同:nth-child(1)等同:first-child 选择第一个nth-child(n5)等同:nth-child(1n5) 选择第五个到最后一个nth-child(-n10)等同nth-child(-1n10) 倒选第十个到第一个合起来用:nth-child(n5):nth-child(-n10) 选第五到第十个li:nth-child(2n1) 等同 li:nth-child(odd) 选择每个父元素中的奇数 li 子元素即第1个、第3个、第5个等。3n1 选择 1,4,7,10…4n1 选择 1,5,9,13…4n2 选择 2,6,10,14…-4n16 表示从16向前,步长为4, 选择 16,12,8,4
请注意:nth-child() 选择器是基于1的索引即第一个子元素的索引是1。css的:nth-child(1)相当于js的children[0]
下面是一些使用 :nth-child() 选择器的示例
/* 选择每个父元素中的第三个子元素如果它是一个li元素 */
ul li:nth-child(3) {color: red; /* 第三个列表项将显示为红色 */
}/* 选择每个父元素中的偶数子元素如果它是一个li元素 */
ul li:nth-child(even) {background-color: lightgray; /* 偶数列表项将有灰色背景 */
}/* 使用公式选择子元素。这将选择第1个第4个第7个等... 如果它是一个li元素 */
ul li:nth-child(3n1) {font-weight: bold; /* 符合公式的列表项将加粗显示 */
}你也可以将 :nth-child() 选择器与其他选择器结合使用以选择具有特定属性或属于特定类的元素的子元素。例如
/* 选择类为.items的列表中的第三个li子元素 */
ul.items li:nth-child(3) {color: green; /* .items类中的第三个列表项将显示为绿色 */
}在这个例子中ul.items li:nth-child(3) 选择器将选择类为 .items 的 ul 元素中的第三个 li 子元素并将其文本颜色设置为绿色。 CSS的伪类选择器:nth-child()的用法示例
n可以- , 右边数字只能
第一到第六的td : td:nth-child(n1):nth-child(-n6)
td:nth-child(n1):nth-child(-n6)第二到第八的a : a:nth-child(n2):nth-child(-n8)
a:nth-child(n2):nth-child(-n8)1等效0n1 , 7等效0n7 , 没有负数,不能倒数
第一个a : (1) 或 (0n1)
a:nth-child(1)a:nth-child(0n1)第七个a : (7) 或 (0n7)
a:nth-child(7)a:nth-child(0n7)想-1,“0n-1”,“-7”,0n-7从倒数开始是行不通的 第三个及之后的a : (n3)
a:nth-child(n3)前七个a, 第七个及之前的a : (-n7)
a:nth-child(-n7)第三到第七之间的a : a:nth-child(n3):nth-child(-n7)
a:nth-child(n3):nth-child(-n7)奇数行 : tr:nth-child(2n1) 或 tr:nth-child(odd)
tr:nth-child(2n1)tr:nth-child(odd)偶数行 : tr:nth-child(2n) 或 tr:nth-child(even)
tr:nth-child(2n)tr:nth-child(even)第2,12,22,32,42,52… 以10个递增 : 10n2
:nth-child(10n2)第52个及之前: 2,12,22,32,42,52… 以10个递减 : -10n52
:nth-child(-10n52)MDN Web 开发技术 :nth-child()
选择器示例 tr:nth-child(odd) or tr:nth-child(2n1) 表示 HTML 表格中的奇数行1、3、5……。
tr:nth-child(even) or tr:nth-child(2n) 表示 HTML 表格中的偶数行2、4、6……。
:nth-child(7) 表示第 7 个元素。
:nth-child(5n) 表示第 5、10、15……个元素。第一个匹配的元素是 0 [5x0]但由于元素的索引是从 1 开始的而 n 从 0 开始所以不会匹配任何元素。这乍一看可能有点奇怪但是当公式中的 B 部分为 0 的值时就会变得更有意义就像下面的示例一样。
:nth-child(n7) 表示第七个及其之后的元素7 [07]、8 [17]、9 [27]等等。
:nth-child(3n4) 表示第 4 [(3×0)4]、7 [(3×1)4]、10 [(3×2)4]、13 [(3×3)4]……个元素。
:nth-child(-n3) 表示前三个元素。[-03、-13、-23]
p:nth-child(n) 表示兄弟元素列表中的每个 p 元素。这与简单的 p 选择器选择的元素相同尽管具有更高的优先级。
p:nth-child(1) 或 p:nth-child(0n1) 表示每一个兄弟元素列表中的第一个 p 元素。这与 :first-child 选择器相同并且具有相同的优先级。
p:nth-child(n8):nth-child(-n15) 表示兄弟元素列表中的第 8 到第 15 个且为 p 元素的元素。
