结构伪类公式

简介: 结构伪类公式

 我们已经知道了基本的结构伪类用法,但是我们还有没有高阶的玩法呢?


答案是当然有,还记得选第几个标签是怎么写的吗?


标签:nth-child(){},没错,我们知道,括号里面写几就是第几个标签,但是这仅仅只能选择一个标签,我们有没有办法同时选择多个呢?


当然可以了,就是用结构伪类公式,我们可以在括号里写一些公式,这样就能达到非凡的效果,实现高阶玩法。


比如说我想要偶数行变:

 <style>
       div:nth-child(2n){
        background-color: skyblue;
       }
    </style>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</body>

运行效果:

 

想让奇数行变:

<style>
       div:nth-child(2n+1){
        background-color: skyblue;
       }
    </style>

运行结果:

想要前五个变:

<style>
       div:nth-child(-n+5){
        background-color: skyblue;
       }
    </style>

想要从第五个后面变:

<style>
       div:nth-child(n+5){
        background-color: skyblue;
       }
    </style>

看到了吧,这就是高阶玩法,这里面有一个n,它是从零开始,一直往后面取,所以说可以实现很多方法,你比如说每四个选择一次,就可以选择4n,所以现在你知道它的妙用了吧?

当然偶数还可以用even

奇数还可以用odd  


相关文章
|
1月前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
1月前
|
前端开发 开发者
CSS面试考点:盒模型、选择器、单位和像素概念
【4月更文挑战第2天】 CSS面试考点:盒模型、选择器、单位和像素概念
36 12
|
1月前
|
数据可视化
R语言进行数据结构化转换:Box-Cox变换、“凸规则”变换方法
R语言进行数据结构化转换:Box-Cox变换、“凸规则”变换方法
|
8月前
|
前端开发
|
10月前
元素水平垂直居中的方法归纳总结
元素水平垂直居中的方法归纳总结
射线法——判断一个点是否在多边形内部(适用于凸多边形和凹多边形)【关键原理解释+文字伪代码】
射线法——判断一个点是否在多边形内部(适用于凸多边形和凹多边形)【关键原理解释+文字伪代码】
424 0
labview程序结构for循环while循环n层叠平铺定时顺序结构求和总和平方和根
labview程序结构for循环while循环n层叠平铺定时顺序结构求和总和平方和根
157 0
|
JavaScript API 容器
彻底弄懂元素样式、位置、大小相关计算
在我们日常开发中偶尔会碰到获取元素样式、设置某元素样式、计算元素位置、计算滚动距离等需求。但是js中关于元素位置、样式、大小的api种类繁多,稍不留神就会搞不清楚。今天笔者就带你彻底弄清楚,让你在这类问题上不再迷茫。
184 0
|
前端开发 JavaScript 容器
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
|
前端开发
伪类选择器设置奇偶数标签(1+X Web前端开发 例题)
伪类用于定义元素的特殊状态。 例如,它可以用于:设置鼠标悬停在元素上时的样式,为已访问和未访问链接设置不同的样式,设置元素获得焦点时的样式
204 0
伪类选择器设置奇偶数标签(1+X Web前端开发 例题)