css :last-child选择不起作用原因

该文章由 leevare 发布于 ,归类于 HTML/CSS
<div class="container">
    <h1>Lorem ipsum dolor sit.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, deleniti, quaerat! Aliquid.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, cupiditate ut commodi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat ad, saepe optio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At commodi dicta explicabo.</p>
</div>

例如上述一段html,当我使用p:last-child来给最后一个p标签赋予样式时,并不能起作用。

网上查了一下,原来是使用:last-child或者是:first-child这样的伪类时,其前后都不应该有其它的兄弟节点,所以解决办法是使用一个div将下面的p标签包裹起来即可。

<div class="container">
    <h1>Lorem ipsum dolor sit.</h1>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, deleniti, quaerat! Aliquid.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, cupiditate ut commodi.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat ad, saepe optio.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At commodi dicta explicabo.</p>        
    </div>
</div>

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒