Question

我对:last-child标记的某个类使用p时遇到问题，但与其他已归类的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;
}

注意：ref属性用于我的jQuery

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选择器支持。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

因为p.header不是最后一个孩子......所以p始终是info类。last-child

选择器是最后一个子节点（节点）而不是最后一个类＆＃34; ＆＃34;

此处的类名仅作为条件使用，因此如果info具有类div，则将其设置为样式。

澄清你是否有这个选择器：

div.port-container＆gt; p.header：最后子

所有都是以元素为目标的条件：

如果它位于带有port-container

>

它是直接的孩子p
它的header标记为last-child
它是{{1}}

Answer 3

你的选择器概念错了。

您使用类选择器的事实不会过滤选择。在css中，组合选择器用作&&条件，因此：

p.header:last-child

将定位<p>标记，该标记既是类.header的元素，也是其容器的最后一个子元素。

<强>可惜的是

没有办法获得某个类的最后一个元素

Answer 4

正如其他人一样，你的css选择器不起作用，因为p.header:last-child必须是最后一个子句点。你可以使用jQuery解决这个问题。

CSS：

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

JS：

$('.port-container > p.header:last').addClass('last-header');

最后一个孩子没有按预期使用p标签工作

4 个答案: