Question

我有一个包含多个p元素和多个input元素的容器。我需要选择此容器中的最后一个p元素，由于某种原因我无法做到。我尝试了几种方法，但似乎没有用。它必须是last-child而不是nth-child，因为将来可能会有更多元素。是last-of-type和p:last-child之间的差异？

JSfiddle here。

HTML：

<div id="inputContainer">
    <p class="contact_title">EMAIL</p>
    <p>john@snow</p>
    <p class="contact_title">PHONE</p>
    <p>123-hodor-hodor</p>
    <p class="contact_title">ADDRESS</p>
    <p>castle black</p>
    <input id="name" placeholder="Name">
    <input id="email" type="email" placeholder="Email">
    <input id="phone" type="number" placeholder="Phone">
    <textarea id="note" placeholder="bla bla"></textarea>
</div>

CSS：

/* not working 1 */
 #inputContainer :last-of-type p {
    color: red !important;
}
/* not working 2
 #inputContainer > p:last-child {
    color: red !important;
}
not working 3
 #inputContainer p:last-child {
    color: red !important;
} */

Answer 1

以这种方式使用css选择器..这将起作用。在最后一个类型之前使用p ..否则它将无效。

#inputContainer p:last-of-type {color:red;}

Answer 2

：last-of-type是此特定类型的最后一个元素...
所以p：last-of-type将是所有兄弟姐妹中的最后一个元素。

：last-child仅触发，如果它确实是最后一个孩子

<div>
  <p></p>
  <p></p>
</div>

这里第二个＆lt; p＆gt;会触发p：last-child，因为它是＆lt; div＆gt;的最后一个子节点元件

<div>
  <p></p>
  <p></p>
  <img />
</div>

这里p：last-child不会触发，因为2＆lt; p＆gt;都不会触发。它是父母的最后一个孩子，实际上最后一个孩子是＆lt; img＆gt; p：last-of-type将由第二个＆lt; p＆gt;触发。但是，因为这是最后一次＆lt; p＆gt;在所有3个兄弟姐妹中

CSS无法选择p元素的last-child

2 个答案: