html - 最后一个 child 没有按预期使用 p 标签工作

Question

我在将 :last-child 与我的 p 标记的某个类一起使用时遇到问题，但与其他类 p 一起使用时效果很好标签，所以这是我的代码:

<div class="port-container">
    <div class="header"><h1>Portfolio</h1></div>
    <p class="header" ref="who">Who am I?</p>
    <p class="info" ref="who">...</p>
    <p class="header" ref="what">What do I do?</p>
    <p class="info" ref="what">...</p>
    <p class="header" ref="projects">Current Projects?</p>
    <p class="info" ref="projects">...</p>
    <p class="header" ref="conntact">Contact me</p>
    <p class="info" ref="conntact">...</p>
</div>
<img class="bg-button pull-center" bg-toggle="false" src="./assets/icon-bg_white.png" title="Toggle Background" />

我的 CSS:

.pull-center {
                position:absolute;
                margin:auto auto;
                top:0;bottom:0;
                left:0;right:0;
}

div.port-container {
                width:975px;
                height:auto;
                overflow:auto;
                margin:auto auto;
}
                div.port-container > .bg-toggle {
                                background-color:rgba(44,62,80,0.25);
                                border-color:rgba(0,0,0,0.5) !important;
                }
                div.port-container > div.header {
                                height:200px;
                                line-height:200px;
                                border:solid 1px #FFF;
                                border-top-left-radius:5px;
                                border-top-right-radius:5px;
                                text-align:center;
                                color:#FFF;
                }
                div.port-container > p.header {
                                padding:10px;
                                border-bottom:solid 1px #FFF;
                                border-left:solid 1px #FFF;
                                border-right:solid 1px #FFF;
                                color:#FFF;
                                cursor:pointer;
                }
                div.port-container > p.header:last-child { /*<----- Issue */
                                border-bottom-left-radius:5px;
                                border-bottom-right-radius:5px;
                }
                div.port-container > p.header.active {
                                border-bottom-left-radius:0px;
                                border-bottom-right-radius:0px;
                }
                div.port-container > p.info {
                                padding:10px;
                                border:solid 1px #FFF;
                                border-top:none;
                                display:none;  
                                color:#FFF;
                }
                div.port-container > p.info:last-child { /*<----- Works fine */
                                border-bottom-left-radius:5px;
                                border-bottom-right-radius:5px;
                }
img.bg-button {
                width:32px;
                height:32px;
                top:auto;left:auto;
}

注意:我的 jQuery 中使用了 ref 属性

tl;dr:

这很好用:

div.port-container > p.info:last-child {
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

但这不是:

div.port-container > p.header:last-child {
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

Answer 1

p.info:last-child 匹配所有也是其父元素的最后一个子元素的 p.info 元素。

在您的标记中，p.header 不是其父项的最后一个子项，因此当 p.header 匹配各种元素时，p.header:last- child 将不匹配。

不幸的是，没有:last-of-its-class 选择器。除非您对 HTML 结构做出一些假设，否则匹配是不可能的。我做了一个:

p.header:nth-last-child(2) { }

它匹配所有 p.header 元素，这些元素是其父元素的倒数第二个子元素。请注意，这需要 CSS3 选择器支持。

p { background: #CCC; }
p.info:last-child { background: #FC0; }
p.header:nth-last-child(2) { background: #FC6; }

<div class="port-container">
  <div class="header"><h1>Portfolio</h1></div>
  <p class="header" ref="who">Who am I?</p>
  <p class="info" ref="who">...</p>
  <p class="header" ref="what">What do I do?</p>
  <p class="info" ref="what">...</p>
  <p class="header" ref="projects">Current Projects?</p>
  <p class="info" ref="projects">...</p>
  <p class="header" ref="conntact">Contact me</p>
  <p class="info" ref="conntact">...</p>
</div>