Question

我有一个HTML结构，该结构具有一些元素的三个结构和下面的两个p：

<some_tag></some_tag>
<p></p>
<p></p>

<some_tag></some_tag>
<p></p>
<p></p>

<some_tag></some_tag>
<p></p>
<p></p>

实际上，我不仅有三个结构（更多的是三十个），所以我需要自动化。

我需要选择前两个结构中的每个最后p，而不是最后一个结构中的最后p。

我的问题

似乎没有CSS方法可以进行我想要的选择。

考虑用HTML方式将每个非最后的some_tag结构包装在其他元素中（例如div），我得出结论，我不喜欢这种解决方案，因为它看起来很不美观。 / p>

我的问题

您知道一种通过JavaScript自动执行所描述的选择的方法吗？

Answer 1

对于您要执行的操作，这不是一个好的HTML结构。如果将hX和p的每组包装在一个容器标签（如div中），会容易得多。

否则，您将不得不使用JavaScript遍历每个元素，并决定是否应用样式（如果当前元素是p，并且存在下一个元素，而不是{{1} }。

Answer 2

您可以使用JavaScript进行操作，这是一个示例：

const elements = document.querySelectorAll("*");
let latestParagraph;
const paragraphsToStyle = [];

for(const element of elements){
  if(element.tagName === "P"){
    latestParagraph = element;
  }else{
    if(latestParagraph){
      paragraphsToStyle.push(latestParagraph);
    }
  }
}

paragraphsToStyle.pop();

for(const paragraph of paragraphsToStyle){
  paragraph.style.color = "red";
}

<h3>h</h2>
<p>p1</p>
<p>p2</p>
<h2>h</h2>
<p>p3</p>
<p>p4</p>
<h1>h</h2>
<p>p5</p>
<p>p6</p>

这仅在没有嵌套的情况下起作用。

该脚本遍历页面上的所有元素，并且遇到非段落元素时，会将找到的最新段落添加到paragraphsToStyle数组中。在第一个循环结束时，页面上的最后一段将从数组paragraphsToStyle.pop()

中删除

Answer 3

您的布局是动态创建的吗？您始终可以使用CSS类轻松处理此问题。如果您无法使用布局来控制它，这是一种快速的方法：

#myLayout *:not(:last-child) > p:last-child {
  color: red
}

此代码捕获每个有p个孩子的父母。它应该忽略最后一个孩子的兄弟姐妹，并始终抓住最后一个p。我建议您将*替换为节点或CSS选择器，以防止出现意外结果。我还建议至少将所有内容都封装在如下所示的容器中，以限制可能的问题。

<div id="myLayout">
  <div>
    <h2>h1</h2>
    <p>p1</p>
    <p>p2</p>
  </div>
  <div>
    <h2>h1</h2>
    <p>p1</p>
    <p>p2</p>
  </div>
  <div>
    <h2>h1</h2>
    <p>p1</p>
    <p>p2</p>
  </div>
</div>

Answer 4

编辑：正如其他人所提到的那样，您可能希望重组HTML，以便可以更轻松地与选择器一起使用。但是，如果那不可能，则可以使用JavaScript。在这种情况下，您要做的就是查看元素是否为'p'标签，以及下一个元素是否为'p'标签：

var children = document.getElementById('content').children;
for (let i = 0; i < children.length - 1; i++) {
  let nextTagName = children[i+1].tagName;
  if (children[i].tagName === 'P' && nextTagName !=='P') {
      children[i].classList.add('selected');
  }
}

.selected {
  color: aqua;
}

<div id="content">
    <h2>Heading 1</h2>
    <p>p 1</p>
    <p>p 2</p>
    <h3>Heading 2</h3>
    <p>p 3</p>
    <p>p 4</p>
    <h4>Heading 3</h4>
    <p>p 5</p>
    <p>p 6</p>
</div>

定位给定标签的所有最后（但不是最后）元素

我的问题

我的问题

4 个答案: