CSS：如何通过引用父元素而不是子元素来选择元素

Question

假设我在<p>内有几个<div>元素，如下所示：

HTML

<div>
  <p></p>
  <p></p>
  <p></p> <!-- I want to select the "last" element, <p> or not <p> -->
</div>

现在，我想要设置最后一个元素的样式，<p>或不<p>。一种方法是使用last-child上的<p>选择器，如下所示：

CSS

<style>
  p:last-child {
    /* Awesome styles go here */
  }
</style>

问题

  

如何通过引用<p>但不是<p>来设置最后一个元素（<div>或不<p>）的样式？

实时代码示例

＆＃13;

＆＃13;

p:last-child {
  color: red;
  font-weight: bold
}

＆＃13;

<div>
  <p>Foo</p>
  <p>Bar</p>
  <p>Baz</p> <!-- I want to select the "last" element, <p> or not <p> -->
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以在选择器中使用>来描述直接儿童：

div > p:last-child {
}

此CSS仅会影响p标记的div个标记。

如果出于某种原因，您根本不想引用p，则可以使用*选择器：

div > *:last-child {
}

它会影响div的最后一个孩子。

例如：

＆＃13;

＆＃13;

div > *:last-child {
  font-weight: bold;
  color: red;
}

＆＃13;

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>    
</div>

<div>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>    
</div>

<div>
  <span>1</span>
  <i>2</i>
  <i>3</i> 
</div>

＆＃13;

＆＃13;

＆＃13;