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>

问题

How do I style the last element (<p> or not <p>) by referencing <div> but NOT <p>?

实时代码示例

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

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

Answer 1

您可以在选择器中使用 > 来描述直接子级:

div > p:last-child {
}

此 CSS 只会影响 p 标签，它们是 div 标签的最后一个子标签。

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

div > *:last-child {
}

它会影响 div 的最后一个子元素，无论它是什么。

例如:

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

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