<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 儿子类型选择器 -->
<style type="text/css">
/*从p类型标签中开始选,不考虑前面的其他类型标签
会从每一个父容器中寻找一个
*/
p:first-of-type {
background: orange;
}
/*从最后一个开始找*/
p:last-of-type {
background: greenyellow;
}
/*偶数个*/
p:nth-of-type(even) {
border: 5px solid #000;
}
/*奇数*/
p:nth-of-type(odd) {
border: 5px solid red;
}
/*指定某一个*/
p:nth-of-type(3) {
background: black;
}
/*使用公式计算*/
p:nth-of-type(3n+1) {
line-height: 50px;
}
/*使用其他属性*/
.item:nth-of-type(2n+2) {
background: green;
}
</style>
</head>
<body>
<div>
<h1>h1</h1>
<img src="#" alt="#">
<p class="item">1-1</p>
<p class="item">2-2</p>
<p class="item">3-3</p>
<p class="item">4-4</p>
<p class="item">5-5</p>
<p class="item">6-6</p>
<p class="item">7-7</p>
<p class="item">8-8</p>
<p class="item">9-9</p>
<p class="item">10-10</p>
<h3 class="item">1-1</h3>
<h3 class="item">2-2</h3>
<h3 class="item">3-3</h3>
<h3 class="item">4-4</h3>
<h3 class="item">5-5</h3>
</div>
<div>
<p class="item">1-1</p>
<p class="item">2-2</p>
<p class="item">3-3</p>
<p class="item">4-4</p>
<p class="item">5-5</p>
<p class="item">6-6</p>
<p class="item">7-7</p>
<p class="item">8-8</p>
<p class="item">9-9</p>
<p class="item">10-10</p>
</div>
</body>
</html>
<css3-子类型选择器>
最新推荐文章于 2024-06-13 22:49:40 发布