偽元素選擇器屬性介紹
•偽元素主要作用就是操作元素的文本和添加內容
•偽元素使用說明表
| 屬性 | 描述 |
| X:first-letter | 設置X元素中的第一個字。 |
| X:first-line | 設置X元素中的第一行字 |
| X::before | 在X元素最前面添加內容。 |
| X::after | 在X元素最后面添加內容。 |
first-letter實踐：
•使用first-letter屬性設置div文本第一個字顏色為紅色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>偽元素選擇器</title>
<style>
div:first-letter {
color: red;
}
</style>
</head>
<body>
<div>
從你的全世界路過
</div>
</body>
</html>
效果圖：
first-line實踐：
•使用first-line屬性設置div標簽的文本第一行字顏色為紅色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>偽元素選擇器</title>
<style>
div:first-line {
color: red;
}
</style>
</head>
<body>
<div>
從你的全世界路過<br />
從你的全世界路過<br />
從你的全世界路過<br />
</div>
</body>
</html>
效果圖：
before實踐
• 使用before屬性設置div標簽的文本前面添加“牛奶咖啡”2個字。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>偽元素選擇器</title>
<style>
div::before {
content: "牛奶咖啡：";
}
</style>
</head>
<body>
<div>從你的全世界路過</div>
</body>
</html>
效果圖：
after實踐
•使用after屬性設置div標簽的文本最后面添加“牛奶咖啡”2個字。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>偽元素選擇器</title>
<style>
div::after {
content: "牛奶咖啡：";
}
</style>
</head>
<body>
<div>從你的全世界路過</div>
</body>
</html>
效果圖：
結構偽類選擇器介紹
• 結構偽類選擇器是用來處理一些特殊的效果。
•結構偽類選擇器屬性說明表
| 屬性 | 描述 |
| X:first-child | 匹配X元素的第一個子元素 |
| X:last-child | 匹配X元素的最后一個子元素。 |
| X:nth-child(n) | 匹配X元素的第n個子元素 |
| X:nth-child(2n)或者x:nth-child(even) | 匹配X元素的偶數子元素。 |
| X:nth-child(2n+1)或者x:nth-child(odd) | 匹配X元素的奇數子元素。 |
| X:only-child | 匹配X元素中僅有一個的子元素。 |
first-child實踐:
•使用first-child屬性設置div第一個標簽文本顏色為藍色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>偽元素選擇器</title>
<style>
div{
width:200px;
height:30px;
background:red;
text-align:center
}
div:first-child {
color:blue
}
</style>
</head>
<body>
<div>從你的全世界路過</div>
<div>從你的全世界路過</div>
<div>從你的全世界路過</div>
</body>
</html>
效果圖：
last-child實踐：
•使用last-child屬性設置div最后一個標簽文本顏色為藍色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>偽元素選擇器</title>
<style>
div{
width:200px;
height:30px;
background:red;
text-align:center
}
div:last-child {
color: blue
}
</style>
</head>
<body>
<div>從你的全世界路過</div>
<div>從你的全世界路過</div>
<div>從你的全世界路過</div>
</body>
</html>
效果圖：
nth-child實踐
•使用nth-child(n)屬性設置div標簽中的第四個lable標簽文本顏色為藍色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>偽元素選擇器</title>
<style>
div {
width: 146px;
height: 100px;
background: red;
text-align: center
}
div label:nth-child(4) {
color: blue;
}
</style>
</head>
<body>
<div>
<label>從你的全世界路過</label>
<label>從你的全世界路過</label>
<label>從你的全世界路過</label>
<label>從你的全世界路過</label>
</div>
</body>
</html>
效果圖：
nth-child(2n)實踐：
•使用nth-child(2n)屬性設置div標簽中的偶數標簽文本顏色為藍色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>偽元素選擇器</title>
<style>
div {
width: 146px;
height: 100px;
background: red;
text-align: center
}
div label:nth-child(2n) {
color: blue;
}
</style>
</head>
<body>
<div>
<label>從你的全世界路過</label>
<label>從你的全世界路過</label>
<label>從你的全世界路過</label>
<label>從你的全世界路過</label>
</div>
</body>
</html>
效果圖：
•使用nth-child(2n+1)屬性設置ul標簽中的奇數li標簽文本顏色為紅色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>偽元素選擇器</title>
<style>
div {
width: 146px;
height: 100px;
background: red;
text-align: center
}
div label:nth-child(2n+1) {
color: blue;
}
</style>
</head>
<body>
<div>
<label>從你的全世界路過</label>
<label>從你的全世界路過</label>
<label>從你的全世界路過</label>
<label>從你的全世界路過</label>
</div>
</body>
</html>
效果圖：
only-child實踐：
•使用only-child屬性設置ul標簽中的僅有一個li標簽文本顏色為紅色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>偽元素選擇器</title>
<style>
ul li:only-child {
color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul>
<li>就我一個li標簽</li>
</ul>
</body>
</html>
效果圖：
