我们已经知道了基本的结构伪类用法,但是我们还有没有高阶的玩法呢?
答案是当然有,还记得选第几个标签是怎么写的吗?
标签: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