css3 - css中如何让第一个和最后一个不被选中?

html-css046

css3 - css中如何让第一个和最后一个不被选中?,第1张

方法很多种，例如通过伪类：last-child{ 样式 }这个是选择最后一个父级子元素。

第一个父级子元素可以这样nth-child(1){ 样式 }

除了上面的方法还可以通过给第一和最后一个元素设置一个额外的类来设置样式。

选择父级下第一个元素和最后一个元素

如：

<ul class="list">

<li>aaaa</li>

<li>bbbb</li>

<li>ccccc</li>

<li>dddd</li>

</ul>

.list li:first-child{color:#f00} //只有aaa变红色

.list li:last-child{font-weight:bold} //只有dddd变粗体

:first-child和:last-child

用来选择某个元素的第一个子元素。

//输入ul li:first-child

//输入ul li:last-child

刚刚有个这方面的视频，视频的系列名称叫做 《Buid New World》 里面的第八集是讲CSS3 选择器的，有机会看看吧