结构伪类公式

简介: 结构伪类公式

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


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


标签: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月前
|
前端开发
CSS选择器十二种方法
CSS选择器十二种方法
|
10月前
|
前端开发 JavaScript 容器
层叠上下文、层叠顺序
层叠上下文、层叠顺序
53 1
|
11月前
|
算法
ENVI_IDL:使用反距离权重法选取最近n个点插值(底层实现)并输出为Geotiff格式(效果等价于Arcgis中反距离权重插值)
ENVI_IDL:使用反距离权重法选取最近n个点插值(底层实现)并输出为Geotiff格式(效果等价于Arcgis中反距离权重插值)
266 0
labview程序结构for循环while循环n层叠平铺定时顺序结构求和总和平方和根
labview程序结构for循环while循环n层叠平铺定时顺序结构求和总和平方和根
150 0
|
JavaScript API 容器
彻底弄懂元素样式、位置、大小相关计算
在我们日常开发中偶尔会碰到获取元素样式、设置某元素样式、计算元素位置、计算滚动距离等需求。但是js中关于元素位置、样式、大小的api种类繁多,稍不留神就会搞不清楚。今天笔者就带你彻底弄清楚,让你在这类问题上不再迷茫。
182 0
|
设计模式 前端开发 容器
css选择器以及权重这次我是真的弄懂了
css作为前端的三大基石,对于我们前端开发来说极其重要。其中css选择器在日常开发中天天会碰到,但是每种类型的选择器你真的都弄懂弄透彻了吗?下面请跟随笔者的步伐在来温习一遍。希望能对你有所帮助。
65 0
|
前端开发 JavaScript 容器
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
2、层级选择器(组合、层级、伪元素、伪类)
2、层级选择器(组合、层级、伪元素、伪类)
86 0
|
前端开发
伪类选择器设置奇偶数标签(1+X Web前端开发 例题)
伪类用于定义元素的特殊状态。 例如,它可以用于:设置鼠标悬停在元素上时的样式,为已访问和未访问链接设置不同的样式,设置元素获得焦点时的样式
198 0
伪类选择器设置奇偶数标签(1+X Web前端开发 例题)
html+css实战113-结构伪类-公式
html+css实战113-结构伪类-公式
115 0
html+css实战113-结构伪类-公式

热门文章

最新文章