本文介绍了CSS3中的结构类选择器，如:first-child, :last-child, :nth-child()等，以及伪元素如:first-line, :first-letter, ::before, ::after的用法，并通过实例解释了它们如何影响元素样式。通过这些选择器，开发者能更精确地控制页面布局和内容呈现。"
105989912,7745958,Golang发送嵌入图片的邮件教程,"['Golang', '邮件服务', '编程']
1、element:first-child
其父元素的首个子元素的element元素。
首先找到element元素，找到其父元素，通过父元素找到对应的子元素，若该子元素为element标签，则为其设置样式。
2、element:last-child
3、element:nth-child()
4、element:nth-last-child()
5、element:first-of-type
element的父元素的首个子元素为element元素。
6、element:last-of-type
7、element:nth-of-type()
8、element:nth-last-of-type()
9、element:only-child
element的父元素仅有唯一的元素，且该元素为element。
10、element:only-of-type
element的父元素仅有唯一的element元素，可以有其他非element元素。
11、element:empty
该元素没有任何子元素以及文本。
12、element:not()
指定除了选定的选择器或元素之外的其他元素。
伪元素
::first-line 第一行
::first-letter 第一个字符
::before 在元素内容前面插入新的内容
::after 在元素内容后面插入新的内容
<body><div>
<div>12</div>
<div>13</div>
<div>14</div>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
</body>
比如：
1、li:first-child{} 1
2、li:last-child{} 5
3、li:nth-child(2){} 2
4、div:first-child{} 12、13、14、6、9
找到红色div的爸爸body，body的第一个子元素红色div，所以12、13、14选中。
蓝色div的爸爸红色div，红色div的一个子元素蓝色div，所以6、9选中。
5、div:last-child{} 14、8、9、10、11
6、div:nth-child(2){} 13、7、10
找到红色div的爸爸body，body的第二个元素ul，ul不符合元素div。
蓝色div的爸爸红色div，红色div的第二个元素蓝色div，所以13、7、10选中。
扫一扫
1346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
