时间戳

首页 > 解决方案 > 不正确的 CSS 选择器规则？

html - 不正确的 CSS 选择器规则？

问题描述

好的，这是我的麻烦，我正在尝试声明以下 CSS 规则 div span > p span + p span {color: green;}；或者更确切地说，选择一个后代span，他是另一个的相邻兄弟span（最后两个spans都是元素的后代孩子p），而后者又是另一个的直接孩子span，但最令人难以置信的是规则div span> p span“是”拿走它

这里是“我想”正确的嵌套 CSS 选择器和 HTML 代码

div span > p span + p span {color: blue;}
<div>
  <span>
    <p>
      <span>Item 1</span>
    </p>
    <p>
      <span>Item 2</span>
    </p>
      </span>
     </div>

标签： htmlcss

解决方案

目前没有一个明确的方法来选择子元素的最后一个后代而不使用 JavaScript。但是您可以尝试像这样使用:last-child。

div span p:last-child span {
  color: blue;
}
<div>
  <span>
    <p>
      <span>Item 1</span>
    </p>
    <p>
      <span>Item 2</span>
    </p>
  </span>
</div>

推荐阅读