4 然后开始对第一个li设置背景颜色以及字体颜色，ul li:nth-child(1){background-color:blue;color:white;}如图所示 5 第一个设置完成后，开始对第二个方块进行设置，第二个方块就是:nth-child(2){};代码如下ul li:nth-child(2){background-color:aqua;color:red;}，浏览器中查看效果，如图所示 6 剩下...
:nth-child() 是一个伪类选择器,用于选择属于其父元素的第N个子元素,不论这些子元素的类型是什么。其基本语法如下: css selector:nth-child(an+b) { /* CSS样式 */ } selector 是你想要选择的基础元素类型(如 div、p 等)。 an+b 是一个公式,其中 a 和b 是整数,n 是计数器(从0开始)。这个公式...
我们可以组合选择器:not()和:nth-child()来排除特定元素。 例如在这种情况下,我们要排除第 5 个和第 6 个元素,然后使用::not(:nth-child(5))和:not(:nth -child(6)). ul li:not(:nth-child(5)):not(:nth-child(6)) { color: red; } <ul> <li>Test 1</li> <li>Test 2</li> <li>T...
.nav li:nth-child(2) a { color: #ff0000},这个能让<ul class='nav'>标签里面的第二个li的a标签的颜色变为红色。:nth-child用倍数比较好用。比如:nth-child(3n),只要是3的倍数的都会被选取（3，6，9...）
:nth-child(2n)选取偶数标签,2n也可以是even 点此查看实例展示 .demo01 li:nth-child(2n){background:#090} :nth-child(2n-1)选取奇数标签,2n-1可以是odd 点此查看实例展示 .demo01 li:nth-child(2n-1){background:#090} :nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一” ...
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 语法element:nth-child(an + b) { /*规则*/ }值值描述 :nth-child(2n+1) 规定奇数行。 nth-child(odd) 规定奇数行。 nth-child(2n) 规定偶数行。 nth-child(even) 规定偶数行。 :nth-child(0n+1) 规定子元素中第一个...
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)、first-child、:last-child、:nth-child()、:nth-last-child()的用法。
body { margin-left: 20px; } body :nth-child(7) { font-family: courier; } #fancy { font-family: Cursive; } I am wondering about the css only changing the paragraph's font to courier when the nth-child is labeled as 7. Every way I count it, I only see it logically being the...
伪类:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文,很可能会让人头晕,再加上笔者的文笔水平有限,所以我决定避开an+b的说法,把它拆分成5种写法共5部分来说明。第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。例子:li:nth-child(3){background...
and the :nth-child css: artikel:nth-last-child(odd) { display: -webkit-flex; /* Safari */ -webkit-flex-direction: row-reverse; /* Safari 6.1+ */ display: flex; flex-direction: row-reverse; flex-wrap: wrap; } Now i'm no wiz at php nor css, so the code might not be precis...