仅将 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孩子。

应用样式，例如borderto myclass，将导致堆叠边框。

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

Answer 1

XPath-1.0 表达式选择所有最myclass里面有inner1和inner2子元素的元素是//myclass[inner1 and inner2]但是根据CSS/XPath 等效项的这个表，在 CSS3 中是不可能实现的：Goal&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; CSS 3&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; XPathAll Elements&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; *&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //*All P Elements&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; p&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //pAll Child Elements&nbsp; &nbsp; &nbsp; p > *&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //p/*Element By ID&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#foo&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//*[@id=’foo’]Element By Class&nbsp; &nbsp; &nbsp; &nbsp; .foo&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//*[contains(@class,’foo’)] 1Element With Attribute&nbsp; *[title]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//*[@title]First Child of All P&nbsp; &nbsp; p > *:first-child&nbsp; //p/*[0]All P with an A child&nbsp; &nbsp;Not possible&nbsp; &nbsp; &nbsp; &nbsp;//p[a]&nbsp; <!-- This line would be relevant -->Next Element&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; p + *&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //p/following-sibling::*[0]所以，我想你必须寻找另一种方式来实现这一点。

Answer 2

我不相信没有 JS 就可以做到这一点，但如果你愿意接受它，在 JS 中有一种简单的方法。如果它的深度是固定的，您可以检查父类的父类是否也是“myclass”。如果没有，您可以检查 div 是否有带有“myclass”的孩子。