您的位置：首页 > Web前端 > CSS

CSS中nth-child和nth-of-type的简单使用

2016-03-04 10:31 826 查看

ele:nth-child是查找父元素下的子元素，包括子元素类型非ele的，当子元素类型不是ele时，则不会进行任何操作；
ele:nth-of-type是查找父元素下的子元素类型为ele的元素，其是按类型进行选择，只有元素类型是ele才能进行匹配。
同样的还有first-child与first-of-type、last-child与last-of-type。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JS学习范例</title>
<style>

/*取出ul中每一个li前的空格，需要在ul中设置字体大小为0，再到具体的li中设置字体的大小*/
ul{
font-size: 0;
}

.item{
border: 1px solid #ccc;
padding: 15px;
display: inline-block;
}
.item li{
display: inline-block;
border: 1px solid #ccc;
padding: 2px;
}

.item li span{
display: inline-block;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 15px;
color: #0722AD;
background-color: #D6B514;
font-size: 15px;
}

/*nth-child只是在父节点的子节点标签，当子节点中有非指定的节点时，则跳过*/
.item1 li:nth-child(3){
background-color: lime;
}

.item2 li:nth-child(n + 6){
background-color: lime;
}

.item3 li:nth-child(-n + 4){
background-color: lime;
}

.item4 li:nth-child(4n + 1){
background-color: lime;
}

.margin-item{
display: inline-block;
border: 2px solid #F18806;
padding: 0;
margin: 0;
}

.margin-item li{
display: inline-block;
margin-right: 3px;
}

.margin-item li span{
display: inline-block;
vertical-align: top;
border: 2px solid #11A7A0;
width: 100px;
height: 30px;
}

/*nth-of-type只是在父节点的子节点中同类型标签*/
.margin-item li:nth-of-type(5n){
margin-right: 0;
margin-bottom: 3px;
}

.margin-item li:last-of-type{
margin-right: 0;
}

</style>
</head>

<body>
<h1>nth-child(3)：选择某元素下的第三个元素</h1>
<ul class="item item1">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
<li><span>12</span></li>
<li><span>13</span></li>
</ul>

<br/>

<h1>nth-child(n + 6)：选择第6个元素之后的</h1>
<ul class="item item2">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
<li><span>12</span></li>
<li><span>13</span></li>
</ul>

<br/>

<h1>nth-child(-n + 4)：选择第4个元素之前的</h1>
<ul class="item item3">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
<li><span>12</span></li>
<li><span>13</span></li>
</ul>

<br/>

<h1>nth-child(4n + 1)：间隔3个选一个</h1>
<ul class="item item4">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
<li><span>12</span></li>
<li><span>13</span></li>
</ul>

<br/>

<h1>nth-child(5n)：每5个换行</h1>
<ul class="margin-item">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span></span></li>
<li><span></span></li><br/>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span></span></li>
<li><span></span></li><br/>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航