jquery - 紧随其后的子元素的 CSS 选择器

Question

两个简单的 HTML 示例:

<p>
  <i>Some text</i>
</p>

<p>Here's a paragraph that has <i>some text</i>, and then some more</p>

使用 CSS 时，这会选择 <i>在这两种情况下都是:

p > i {
  border: 1px solid red;
}

>以每个 <i> 为目标在每个 <p> 内.

我正在寻找的是一种只针对 <i> 的方法紧跟在 <p> 之后的，换句话说，目标是 <i>在第一个例子中但不是在第二个例子中。在某种程度上 +选择相邻的 sibling ，但对于相邻的 child 。这可能吗？

我查看了 jQuery 的 only-child选择器，但这也针对 <i>在这两个示例中都是，因为文本(“这是一段......”)不被视为子项。

Answer 1

您不能使用 CSS 完成此工作，但使用 javascript/jquery 您可以选择目标元素，如底部所示。

选择所有 i 元素并使用 .filter() 过滤所选元素。在过滤器回调中使用 previousSibling 检查 i 的先前文本属性(property)。

$("p > i").filter(function(){
  return this.previousSibling.nodeValue.trim() == "";
}).css("border", "1px solid red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <i>Some text</i>
</p>
<p>Here's a paragraph that has <i>some text</i>, and then some more</p>
<p>
  <i>Some text</i>
</p>
<p>text <i>some text</i>, text</p>