您的位置：首页 > 其它

nth-child 的一些小尝试

2016-01-11 17:18 288 查看

nth-child 的一些小尝试

前言

对于 first-child 或者 last-child 等,还算比较常用.但是 nth-child 一般也就用隔行变色.一直不认为其有多强大的功能,甚至认为其比较鸡肋.

但是今天深入研究了一下,发现这货不是一点半星的强大啊!!!!不废话,直接上代码

code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nth-child test</title>
</head>
<body>
<ul>
<li>this is title 1</li>
<li>this is title 2</li>
<li>this is title 3</li>
<li>this is title 4</li>
<li>this is title 5</li>
<li>this is title 6</li>
<li>this is title 7</li>
<li>this is title 8</li>
<li>this is title 9</li>
<li>this is title 10</li>
<li>this is title 11</li>
<li>this is title 12</li>
<li>this is title 13</li>
<li>this is title 14</li>
<li>this is title 15</li>
<li>this is title 16</li>
<li>this is title 17</li>
<li>this is title 18</li>
<li>this is title 19</li>
<li>this is title 20</li>
</ul>
</body>
</html>
<style>
li:nth-child(1){background: #fda;}
li:nth-child(3n){background: #daf;}
li:nth-child(-n+4) {font-weight: bold;}
li:nth-child(5n){border-bottom: 1px solid #ddd;padding-bottom: 20px;margin-bottom: 20px;}
li:nth-child(n+5) {text-indent: 10px;}
li:nth-child(3n+1) {color: #f00;}
li:nth-child(3n-1) {color: #00f;}
</style>

太TM灵活了,以后这种地方,根本就不需要加上 class啦!!!!

nth-child 的一些小尝试

nth-child 的一些小尝试

前言

code

更多内容阅读