css偽類選擇器匹配第N個li元素
阿新 • • 發佈：2022-03-01
1. 結構偽類選擇器
作用：根據元素在html中的結構關係查詢元素
場景：用於查詢某父級選擇器中的子元素
E:first-child{} 匹配父元素中第一個子元素，並且時E元素 E:last-child{} 匹配父元素中最後一個子元素，並且時E元素 E:nth-child(n){} 匹配父元素中第n個子元素，並且時E元素 E:nth-last-child(n){} 匹配父元素中倒數第n個子元素，並且時E元素 n為0，1，2，3，4，5，6.... 偶數 2n even 奇數 2n+1 2n-1 odd 找到前5個 -n+5 找到從第5個往後 n+5
1.1 匹配第一個li元素 (first-child)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>結構偽類選擇器</title> <style> /* 選擇第一個li */ li:first-child{ background-color: green; } </style> </head> <body> <ul> <li>這是第1個li</li> <li>這是第2個li</li> <li>這是第3個li</li> <li>這是第4個li</li> <li>這是第5個li</li> <li>這是第6個li</li> <li>這是第7個li</li> <li>這是第8個li</li> </ul> </body> </html>
1.2 匹配最後一個li元素 (last-child)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>結構偽類選擇器</title> <style> /* 選中最後一個li */ li:last-child { background-color: red; } </style> </head> <body> <ul> <li>這是第1個li</li> <li>這是第2個li</li> <li>這是第3個li</li> <li>這是第4個li</li> <li>這是第5個li</li> <li>這是第6個li</li> <li>這是第7個li</li> <li>這是第8個li</li> </ul> </body> </html>
1.3 匹配第3個li元素（nth-child）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>結構偽類選擇器</title>
<style>
/* 選中第三個li */
li:nth-child(3) {
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>這是第1個li</li>
<li>這是第2個li</li>
<li>這是第3個li</li>
<li>這是第4個li</li>
<li>這是第5個li</li>
<li>這是第6個li</li>
<li>這是第7個li</li>
<li>這是第8個li</li>
</ul>
</body>
</html>
1.4 匹配前5個li元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>結構偽類選擇器</title>
<style>
/* 選中前五個 */
li:nth-child(-n+5) {
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li>這是第1個li</li>
<li>這是第2個li</li>
<li>這是第3個li</li>
<li>這是第4個li</li>
<li>這是第5個li</li>
<li>這是第6個li</li>
<li>這是第7個li</li>
<li>這是第8個li</li>
</ul>
</body>
</html>
1.5 匹配偶數行 / 奇數行 的li元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>結構偽類選擇器</title>
<style>
/* 選中偶數行 */
li:nth-last-child(odd) {
background-color: aqua;
}
/* 選中奇數行 */
li:nth-last-child(even) {
background-color: brown;
}
</style>
</head>
<body>
<ul>
<li>這是第1個li</li>
<li>這是第2個li</li>
<li>這是第3個li</li>
<li>這是第4個li</li>
<li>這是第5個li</li>
<li>這是第6個li</li>
<li>這是第7個li</li>
<li>這是第8個li</li>
</ul>
</body>
</html>
1.6 匹配第n個li元素後所有的li元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>結構偽類選擇器</title>
<style>
/* 選中第五開始的li */
li:nth-child(n+5) {
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li>這是第1個li</li>
<li>這是第2個li</li>
<li>這是第3個li</li>
<li>這是第4個li</li>
<li>這是第5個li</li>
<li>這是第6個li</li>
<li>這是第7個li</li>
<li>這是第8個li</li>
</ul>
</body>
</html>
1.7 匹配第一個li元素下的第三個a標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>匹配父元素中倒數第n個子元素後所有的該子元素</title>
<style>
li:first-child a:nth-child(3) {
color: aqua;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">這是第1個li元素的第一個a標籤</a>
<a href="#">這是第1個li元素的第二個a標籤</a>
<a href="#">這是第1個li元素的第三個a標籤</a>
<a href="#">這是第1個li元素的第四個a標籤</a>
<a href="#">這是第1個li元素的第五個a標籤</a>
<a href="#">這是第1個li元素的第六個a標籤</a>
</li>
<li><a href="#">這是第2個a標籤</a></li>
<li><a href="#">這是第3個a標籤</a></li>
<li><a href="#">這是第4個a標籤</a></li>
<li><a href="#">這是第5個a標籤</a></li>
<li><a href="#">這是第6個a標籤</a></li>
<li><a href="#">這是第7個a標籤</a></li>
<li><a href="#">這是第8個a標籤</a></li>
</ul>
</body>
</html>
2.偽元素
一般頁面中的非主體內容可以使用偽元素
元素：html設定的標籤 <標籤名></標籤名>
偽元素：由css模擬出的標籤效果
::before 在父元素內容的前面新增一個偽元素
::after 在父元素內容的最後新增一個偽元素
注意：
必須設定content屬性才能生效
偽元素預設是行內元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>偽元素</title>
<style>
.father::before {
/* content屬性必須新增 否則偽元素不生效 */
content: '老鼠';
color: red;
}
.father::after {
content: '大米';
color: green;
/* 預設是行內元素 寬高不生效 */
/* width: 1000px; */
background-color: yellow;
/* display: block; */
}
</style>
</head>
<body>
<!-- 老鼠愛大米 -->
<div class="father">愛</div>
</body>
</html>
3.標準流
標準流：又稱為 文件流，標籤預設的排版規則
常見的標準流排版規則：
1：塊級元素：從上往下，垂直佈局，獨佔一行
2：行內元素 或行內塊元素 ： 從左往右，水平佈局 空間不夠自動折行
4.浮動
浮動的作用：讓垂直佈局的盒子變成水平佈局； 比如一個在左，一個在右
float:left;
left 左浮動
right 右浮動
4.1 特點
-1：浮動元素會脫離標準流.在標準流中不佔位置
-2：浮動元素比標準流多半個級別，可以覆蓋標準流中的元素
-3：浮動找浮動，下一個浮動元素會在上一個浮動元素後面左右浮動
-4：浮動元素有特殊的顯示效果
- 一行可以顯示多個
- 可以設定寬高
注意點：浮動的元素不能通過text-align:center或者margin:0 auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮動</title>
<style>
/* 浮動的標籤 頂對齊 */
/* 浮動:在一行排列 寬高生效--浮動後的標籤具有行內塊特點 */
.one {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: green;
float: left;
/* 因為有浮動 ，不能生效 盒子無法水平居中 */
margin: 0 auto;
}
.three {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
4.2 浮動案例
5.清除浮動
子元素浮動了，此時子元素不能撐開標準流的塊級父元素
方法
1直接設定父元素的高度
優點：簡單方便
缺點:有些佈局不能固定父元素高度
2：額外標籤法
在父元素內的最後新增一個塊級元素，給新增的塊級元素設定clear:both
缺點:會在頁面中新增額外的標籤，會讓頁面html結構變得複雜
3：偽元素清除法【推薦使用】
用偽元素替代了額外標籤
.clearfix::after{
content:'';
display:block;
clear:both;
height:0;
visibility:hidden;
}
優點：專案中使用，直接給標籤加類即可清除浮動
4：給父元素設定overflow:hidden
優點：方便