前端常見bug系列1:容易被誤解的:last-child 和 :first-child

用某個選擇器過濾出來一個元素集合,當我們想選中最后一個元素的時候,是不是很容易想到:last-child?比如,有下面一段CSS和HTML片段:

<style>
        .section{            margin-bottom: 50px;
        }        .section1-item:last-child{            color: blue;
        }</style>
<section class="section section1">
        <header>header</header>
        <p class="section1-item card">111</p>
        <p class="section1-item card">222</p>
        <p class="section1-item card">333</p>
        <p class="section1-item card">444</p>
        <footer>footer</footer></section>

本來是想選中<p class="section1-item card">444</p>給它設置顏色為藍色的,結果什么也沒有發生。為什么?

查看W3C的相關介紹

The :last-child pseudo-class represents an element that is the last child of some other element.

someselecttor:last-chid 所表示的是,如果someselecttor所選中的某個節點恰好是其父元素的最后一個直接子節點,那么該選擇器生效。而不是表示someselecttor選中的節點集合的最后一個。

同理,我們馬上可以想到,:first-child是不是也有類似問題?添加一句樣式.section1-item:last-child{ color: red; }到上面的例子中一試就知道,問題果然存在。

someselecttor:first-chid 所表示的是如果someselecttor所選中的某個節點恰好是其父元素的第一個直接子節點,那么該選擇器生效。


上一篇: HTML-告白程序

下一篇: 微信小程序會讓前端開發者失業

分享到: 更多
pk10最牛计划网站 时时彩平台哪个好 扑克三公游戏下载 重庆时时开奖历史查询 黑龙江时时投注网 有谁知道北京pk10官网网址 上海时时开奖走势 后三不定位胆稳赚技巧 时时彩后一6码倍投方法 龙虎合怎么看规律 时时彩官网app下载 pk10五码循环不死模式 118论坛码精平特一肖 比分直播 北京pk赛车的平台 云南时时票