<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素伪类选择器</title>
<script type="text/javascript" src="../../jquery.min.js"></script>
<style type="text/css">
body{
background-color: #e6fbff;
color: #000;
font-size: 20px;
padding: 0 30px;
}
li{
list-style: none;
}
a{
color: red;
text-decoration: none;
}
.red{
color: red;
}
.pink{
background-color: #20ce7d;
padding: 3px;
color: #fff;
}
.box{
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="box">
<h3>一、第1类子元素伪类选择器</h3>
<p class="red">:first-child ------ 选择父元素的第1个子元素</p>
<p class="red">:last-child ------ 选择父元素的最后1个子元素</p>
<p class="red">:nth-child(n) ------ 选择父元素下的第n个元素或奇偶元素，n的值为“整数|odd|even”</p>
<p class="red">:only-child ------ 选择父元素中唯一的子元素（该父元素只有一个子元素）</p>
</div>
<div class="box">
<h3>二、第2类子元素伪类选择器</h3>
<p class="red">:first-of-type ------ 选择同元素类型的第1个同级兄弟元素</p>
<p class="red">:last-of-type ------ 选择同元素类型的最后1个同级兄弟元素</p>
<p class="red">:nth-of-type ------ 选择同元素类型的第n个同级兄弟元素，n的值可以是“整数|odd|even”</p>
<p class="red">:only-of-type ------ 匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）</p>
<p>“第1类选择器不分元素类型，第2类选择器区分元素类型。”大家一定要记住这句话，对于你区分和理解这2类选择器极其重要。除此之外，我们仔细观察会发现，第2类选择器的命名上都有一个“type”（元素类型），这还给我们带来了一个记忆小技巧。</p>
</div>
</body>
</html>
网友评论