CSS：父元素下第一个或最后一个字元素2020-06-27 15:44 By 吕进 
假设有以下html代码——因P元素与P 元素之间的间距较大，差不多是正常值的2倍；这时候我们需要对div下的第一个P元素和最后一个P元素分别进行设计。
第一个P元素：p:first-child
最后一个P元素：p:last-child【p:last-child 等同于 p:nth-last-child(1)】
first-child和last-child同样适用于TABLE下在TR，UL元素下的LI等。
<div id="zuowen">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
如需屏显代码，请尝试把手机横过来！<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
第一个P元素：p:first-child
最后一个P元素：p:last-child【p:last-child 等同于 p:nth-last-child(1)】
#zuowen > P{
font-family:"Microsoft YaHei", Helvetica, Arial, sans-serif;
font-size:1.0em;
line-height:2em;
word-wrap:break-word; /*自动换行*/
word-break:break-all; /*自动换行*/
text-indent:2em;
margin-top:-0.9em;
margin-bottom:-0.9em;
color:#443D44;
padding:0px 2px;
}
#zuowen > p:first-child{ /* div下的第一个P元素 */
margin-top:0px;
}
#zuowen > p:last-child{ /* div下的最后一个P元素 */
margin-bottom:0px;
}
如需屏显代码，请尝试把手机横过来！font-family:"Microsoft YaHei", Helvetica, Arial, sans-serif;
font-size:1.0em;
line-height:2em;
word-wrap:break-word; /*自动换行*/
word-break:break-all; /*自动换行*/
text-indent:2em;
margin-top:-0.9em;
margin-bottom:-0.9em;
color:#443D44;
padding:0px 2px;
}
#zuowen > p:first-child{ /* div下的第一个P元素 */
margin-top:0px;
}
#zuowen > p:last-child{ /* div下的最后一个P元素 */
margin-bottom:0px;
}
阅读( 4371 ) html css
