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时，这两种情况都会选择：

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

>定位到每个中的每个。

我正在寻找的是仅针对紧随之后的的方式，换句话说，在第一个示例中针对的方式但不是第二个。 +选择相邻兄弟姐妹的一种方式，但用于相邻子项。这可能吗？

我查看了jQuery的only-child选择器，但这也针对两个示例中的，因为文本（“这是一个段落...” ）不算是孩子。

Answer 1

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

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

$("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>

Answer 2

您可以使用简单的javaScript或jQuery进行此操作。由于您在问题中标记了jQuery，因此我提出了解决方案。见下文。

我使用索引制定了解决方案。为确保始终获得第一项，我使用trim()删除空格，因为

<p>
  <i>sometext</i>
</p>

将使的索引为3而不是0。这就是为什么您需要trim（）。

然后，您只需使用该i标签即可完成所需的操作。我添加了一个类，并在CSS中设置了样式。

const paragraph = $("p");
const i = $('p > i')
$(paragraph).each(function() {
  const index = $(this).html().trim().indexOf('<i>');
  index === 0 ? $(this).find(i).addClass('change-me') : ''
})

i.change-me {
  color: 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>

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

2 个答案: