结构伪类公式

简介: 结构伪类公式

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


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


标签: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  


相关文章
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(14)连线(Link)连线类型(直线、延伸直线、正交直线)
本文介绍了Twaver HTML5中连线(Link)的不同类型,包括直线、延伸直线和正交直线,并通过示例代码展示了如何在React组件中设置Link的类型和样式。
27 1
Twaver-HTML5基础学习(14)连线(Link)连线类型(直线、延伸直线、正交直线)
定义变量的方法,元素周期表数据集,以元素的原子序数和电子结构为基础进行排列的
定义变量的方法,元素周期表数据集,以元素的原子序数和电子结构为基础进行排列的
|
6月前
|
前端开发 开发者
CSS面试考点:盒模型、选择器、单位和像素概念
【4月更文挑战第2天】 CSS面试考点:盒模型、选择器、单位和像素概念
52 12
|
6月前
|
数据可视化
R语言进行数据结构化转换:Box-Cox变换、“凸规则”变换方法
R语言进行数据结构化转换:Box-Cox变换、“凸规则”变换方法
|
前端开发
CSS 选择器权重计算与优先级
CSS 选择器权重计算
104 0
CSS 选择器权重计算与优先级
|
11月前
|
算法
插值与拟合的区别以及如何选取
插值与拟合的区别以及如何选取
351 0
labview程序结构for循环while循环n层叠平铺定时顺序结构求和总和平方和根
labview程序结构for循环while循环n层叠平铺定时顺序结构求和总和平方和根
251 0
|
前端开发 JavaScript 容器
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
|
JavaScript API 容器
彻底弄懂元素样式、位置、大小相关计算
在我们日常开发中偶尔会碰到获取元素样式、设置某元素样式、计算元素位置、计算滚动距离等需求。但是js中关于元素位置、样式、大小的api种类繁多,稍不留神就会搞不清楚。今天笔者就带你彻底弄清楚,让你在这类问题上不再迷茫。
218 0
|
设计模式 前端开发 容器
css选择器以及权重这次我是真的弄懂了
css作为前端的三大基石,对于我们前端开发来说极其重要。其中css选择器在日常开发中天天会碰到,但是每种类型的选择器你真的都弄懂弄透彻了吗?下面请跟随笔者的步伐在来温习一遍。希望能对你有所帮助。
82 0