X:nth-child(2n+1)或者x:nth-child(odd) 匹配X元素的奇数子元素
伪元素选择器属性介绍
•伪元素主要感化就是操纵元素的文本和添加内容
•伪元素使用说明表
属性 描述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最后一个标签文本颜色为蓝色
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31803.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")