1、CSS选择器说明
| 选择器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个 p元素。 | 2 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 p 元素。 | 3 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 p 元素。 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 p 元素。 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 | 3 |
特别注意，选择的是选中对象在父元素中的第一个元素
2、基础效果演示
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS伪类选择器</title>
<style type="text/css">
.div{
width: 100px;
margin: 10px;
}
/*选中元素的第一个元素*/
.div:first-child{
color: red;
}
/*选中元素的最后个元素*/
.div:last-child{
color: blue;
}
/*选中元素的第3个元素*/
.div:nth-child(3){
border: 1px solid red;
}
/*选中元素的倒数第3个元素*/
.div:nth-last-child(2){
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">5</div>
</body>
</html>
运行效果：
image.png
3、奇偶选择器
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS伪类选择器</title>
<style type="text/css">
/*odd 表示选择基数行*/
/*even 表示选择基数行*/
/*nth-last-child 只是奇偶计算是倒序*/
.div:nth-child(even){
color: red;
}
</style>
</head>
<body>
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">5</div>
</body>
</html>
运行效果。
image.png
4、有规律的选择器
假如我们想实现边框显示，元素的计数是3n+1红、3n+2 绿 、3n +3 蓝色，应该如何实现呢？
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS伪类选择器</title>
<style type="text/css">
.div{
width: 100px;
margin: 10px;
}
.div:nth-child(3n+1){
border:1px solid red;
}
.div:nth-child(3n+2){
border:1px solid green;
}
.div:nth-child(3n){
border:1px solid blue;
}
</style>
</head>
<body>
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">5</div>
<div class="div">6</div>
<div class="div">7</div>
<div class="div">8</div>
<div class="div">9</div>
</body>
</html>
运行效果：
image.png
5、意料之外的显示
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS伪类选择器</title>
<style type="text/css">
/*odd 表示选择基数行*/
/*even 表示选择基数行*/
.div:nth-child(even){
color: red;
}
</style>
</head>
<body>
<p class="p">p1</div>
<div class="div">div1</div>
<p class="p">p2</div>
<div class="div">div2</div>
<p class="p">p3</div>
<div class="div">div3</div>
<p class="p">p4</div>
<div class="div">div4</div>
<p class="p">p5</div>
<div class="div">div5</div>
</body>
</html>
运行效果：
初学的时候我认为如下结果的错误的，预期的结果应该只有div2和div4。事实上这个结果是对的，我们仔细阅读说明会发现，这类选择器选中的是元素在父元素中的计数，因为div元素的位置都是偶数，所以出现如下运行结果。如果我们只想选中div2和div4应该如何做呢？first-of-type、last-of-type、nth-of-type 和 nth-last-of-type系列选择器可以帮助我们实现这个愿望。
image.png
CSS选择器-系列文章
下一节 CSS-选择器11-first-of-type、last-of-type、nth-of-type 和 nth-last-of-type
