javascript - 仅将 CSS 应用于与父级同一类的最内层元素

Question

我有一个这样结构的 XML 文件(为清楚起见添加了行号)。

1.  <myclass>
2.      <myclass>
3.          <myclass>
4.              <inner1>
5.              <inner2>
6.      <myclass>
7.          <myclass>
8.              <inner1>
9.              <inner2>
10.     <myclass>
11.         <inner1>
12.         <inner2>

我无法控制 XML 文件，它的结构是这样的，我对此无能为力。我需要将样式应用于最内部的 myclass 元素(第 3、7、10 行)。所有最里面的 myclass 元素都有 inner1 和 inner2 子元素。

将样式(例如 border)应用到 myclass 会导致堆叠边框。

目前，我通过解析 XML 并将 innermost-myclass 类添加到所有 inner1 元素的父级来预处理 XML。

Answer 1

我不相信没有 JS 就可以做到这一点，但如果你愿意接受它，在 JS 中有一种稍微简单的方法可以做到这一点。

如果是固定深度，您可以检查父类的父类是否也是“myclass”。如果没有，您可以检查 div 是否有带有“myclass”的 child 。