CSS-偽類子代選擇器
阿新 • • 發佈：2018-12-25
<!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>