怎样运用nth-of-type?
我们先来看看nth-of-type的细致形貌,注重“:”(冒号)在“nth - of - type(2n)”之前附加。
li:nth-of-type(2n){ }
()内的“n”示意的是第几位,“2n”则示意是其是2的倍数
你还能够指定其他的数,比方“3n+1”、“odd”、“even”等。
我们来看一个细致的示例
代码以下
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS nth-of-type</title> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </body> </html>
CSS代码
sample.css
li:nth-of-type(2n){ color: #5bc0de; } li{ margin: 10px; font-size: 120%; }
页面大将显现以下结果,你会看到2的倍数的色彩都变成了蓝色。
本篇文章到这里就悉数完毕了,更多相干的精彩内容能够移步到ki4网的CSS视频教程和CSS3视频教程栏目进一步的进修!!!
以上就是CSS中的nth-of-type怎样运用的细致内容,更多请关注ki4网别的相干文章!