结构性伪类选择器 first last nth-child
2016-09-27 本文已影响13人
Simon_s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/1/
p{
height: 30px;
background-color: aqua;
}
/在其父元素下找第一个子元素 但是第一个元素必须为 指定类型 才生效/
/* p:first-child{
background-color: blueviolet;
}/
/在其父元素下找 最后 一个子元素 但是第一个元素必须为指定类型才生效/
p:last-child{
background-color: black;
}
/在其父元素下 寻找 指定位置 的元素 但其类型必须为指定类型才生效/
p:nth-child(3){
background-color: chartreuse;
}
/在其父元素下 找 倒数 指定位置的元素 但其类型必须为指定类型才生效/
p:nth-last-child(2){
background-color: chartreuse;
}
/2*/
#box1{
margin-top: 100px;
}
#box1 p{
background-color: chartreuse;
}
/*在其父元素下 找第一个指定的元素*/
#box1 p:first-of-type{
background-color: black;
}
/*在其父元素下 找最后一个指定的元素*/
#box1 p:last-of-type{
background-color: blue;
}
/*在其父元素下 找指定的元素第n个*/
#box1 p:nth-of-type(3) {
background-color: aliceblue;
}
/*在其父元素下 找指定的元素倒数第n个*/
#box1 p:nth-last-of-type(3) {
background-color: aliceblue;
}
#box2{
margin-top: 100px;
}
/*在其父元素下 有且仅有一个指定的元素情况下 才会生效 */
#box2 p:only-child{
background-color: blue;
}
#box3{
margin-top: 100px;
}
#box3 p{
background-color: aquamarine;
}
/*odd 代表奇数*/
#box3 p:nth-of-type(odd){
background-color: chocolate;
}
/*even 代表偶数*/
#box3 p:nth-of-type(even){
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div id="box">
<p class="item1"></p>
<p class="item2"></p>
<p class="item3"></p>
<p class="item4"></p>
<p class="item5"></p>
<div id="box1">
<span></span>
<p id="item1"></p>
<p id="item2"></p>
<p id="item3"></p>
<p id="item4"></p>
<p id="item5"></p>
</div>
<div id="box2">
<p></p>
</div>
<div id="box3">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</body>
</html>
