仅将 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                    CSS 3              XPath

All Elements            *                  //*

All P Elements          p                  //p

All Child Elements      p > *              //p/*

Element By ID           #foo               //*[@id=’foo’]

Element By Class        .foo               //*[contains(@class,’foo’)] 1

Element With Attribute  *[title]           //*[@title]

First Child of All P    p > *:first-child  //p/*[0]

All P with an A child   Not possible       //p[a]  <!-- This line would be relevant -->

Next Element            p + *              //p/following-sibling::*[0]

所以，我想你必须寻找另一种方式来实现这一点。

Answer 2

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

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