<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类子代选择器</title>
<style>
*{
margin: 0; /*外边距,盒子与盒子之间的距离*/
padding: 0; /*内间距,盒子内部的内容与盒子边框的距离*/
}
.outer{
border: 1px solid red;/*边框线的宽度 样式:实线 颜色*/
}
.inner{
width: 100px;
height: 150px;
border: 1px solid blue;
}
/*使用:first-child选择第一个子元素*/
div:first-child{
/*border: 2px solid green;*/
}
/*使用:first-child选择最后一个子元素*/
p:last-child{
/*border: 2px solid green;*/
}
/*选择独生子*/
:only-child{
/*border: 2px solid green;*/
}
/*选择第几个孩子 odd奇数 even偶数*/
div *:nth-child(3n+2){
/*border: 2px solid green;*/
}
div#two *:nth-last-child(odd){
/*border: 2px solid green;*/
}
/*选择每种类型中的第一个*/
div#two *:first-of-type{
/*border: 2px solid green;*/
}
/*选择每种类型中的最后一个*/
div#two *:last-of-type{
/*border: 2px solid green;*/
}
/*选择每种类型中的第几个*/
div#two *:nth-of-type(4){
/*border: 2px solid green;*/
}
/*选择每种类型中的倒数第几个*/
div#two *:nth-last-of-type(4){
border: 2px solid green;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<span>hello</span>
<span>hello</span>
</div>
<div class="inner" id="two">
<span>hello1</span>
<span>hello2</span>
<span>hello3</span>
<span>hello4</span>
<span>hello5</span>
<span>hello6</span>
<span>hello7</span>
<span>hello8</span>
<p>你好<span>world</span></p>
<p>你好<span>world</span></p>
</div>
<div class="inner">
<p>你好</p>
</div>
<div class="inner"></div>
<p>你好</p>
<p>你好</p>
<span class="spanOne">hello</span>
<span>hello</span>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类子代选择器</title>
<style>
*{
margin: 0; /*外边距,盒子与盒子之间的距离*/
padding: 0; /*内间距,盒子内部的内容与盒子边框的距离*/
}
.outer{
border: 1px solid red;/*边框线的宽度 样式:实线 颜色*/
}
.inner{
width: 100px;
height: 150px;
border: 1px solid blue;
}
/*使用:first-child选择第一个子元素*/
div:first-child{
/*border: 2px solid green;*/
}
/*使用:first-child选择最后一个子元素*/
p:last-child{
/*border: 2px solid green;*/
}
/*选择独生子*/
:only-child{
/*border: 2px solid green;*/
}
/*选择第几个孩子 odd奇数 even偶数*/
div *:nth-child(3n+2){
/*border: 2px solid green;*/
}
div#two *:nth-last-child(odd){
/*border: 2px solid green;*/
}
/*选择每种类型中的第一个*/
div#two *:first-of-type{
/*border: 2px solid green;*/
}
/*选择每种类型中的最后一个*/
div#two *:last-of-type{
/*border: 2px solid green;*/
}
/*选择每种类型中的第几个*/
div#two *:nth-of-type(4){
/*border: 2px solid green;*/
}
/*选择每种类型中的倒数第几个*/
div#two *:nth-last-of-type(4){
border: 2px solid green;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<span>hello</span>
<span>hello</span>
</div>
<div class="inner" id="two">
<span>hello1</span>
<span>hello2</span>
<span>hello3</span>
<span>hello4</span>
<span>hello5</span>
<span>hello6</span>
<span>hello7</span>
<span>hello8</span>
<p>你好<span>world</span></p>
<p>你好<span>world</span></p>
</div>
<div class="inner">
<p>你好</p>
</div>
<div class="inner"></div>
<p>你好</p>
<p>你好</p>
<span class="spanOne">hello</span>
<span>hello</span>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>