CSS选择器获取HTML树中特定类的最深元素

Question

我的 HTML 中有一堆 DIV 元素，其中一些元素的类属性设置为“rowsLayout”。其中一些 rowsLayout DIV 可以相互嵌套。我想定义一个 CSS 选择器，它只针对那些嵌套中最深的 DIV。也就是说，我不想要包含任何其他 rowLayout DIV 的任何 rowsLayout DIV。

<div id="a" class="rowsLayout">
  <div id="b" class="rowsLayout" />
  <div id="c" class="rowsLayout">
    <div id="d" class="rowsLayout" />
  </div>
</div>
<div id="e" class="rowsLayout" />

有了这个结构，我想要一个以 b、d 和 e 为目标的选择器。

这个可以吗？

Answer 1

投反对票最多，但唯一正确答案

这在 CSS 中是不可能的，除非你使用这个 hack，这使得使用 :dir 或 :lang 属性成为可能。

在 2015 年最好使用 :lang，因为大多数浏览器都支持它。

请注意，这是一种允许您执行此操作的 hack，但如果您非常关心遵循某些标准而不是完成工作，那么请不要使用它。

例子：

.container {
  padding:20px;
}

:lang(ar) {
  direction:rtl;
}

:lang(en) {
  direction:ltr;
}

.container:lang(en) {
  background-color:blue;
}

.container:lang(ar)  {
  background-color:red;
}

.container .a:lang(en)   {
  background-color:orange;
}

.container .a:lang(ar) {
  background-color:yellow;
}

<div id="searchHere">
  
    <div lang=en>      
      <div class="container">
          l t r
        <div class=a>
              a
         </div>
      </div>
      
      <div lang=ar>
          <div class="container">
             r t l
            <div class=a>
              a
              </div>
          </div>        
        
          <div>
            <div class="container">
                r t l 
              <div class=a>
              a
              </div>
            </div>  
            
            <div lang=ar>
                <div class="container">
                   r t l
                  <div class=a>
                    a
                    </div>
                </div>  
            </div>
            
            <div lang=en>      
              <div class="container">
                  l t r
                <div class=a>
              a                  
              </div>
                
                <div lang=ar>
                  <div class="container">
                     r t l
                    <div class=a>
                      a                      
                      <div lang=en>      
                        <div class="container">
                          l t r
                          <div class=a>
                            a                  
                          </div>
                          <div>
                            <div>
                            
                              <div lang=en>      
                                <div class="container">
                                  l t r
                                  <div class=a>
                                    a                  
                                  </div>
                                </div>                      
                              </div>
                              
                              <div lang=ar>      
                                <div class="container">
                                  r t l
                                  <div class=a>
                                    a                  
                                  </div>
                                </div>                      
                              </div>
                              
                            </div>
                            
                          </div>
                        </div>                      
                      </div>
                  </div> 
                </div>
              </div>            
            </div>
            
          </div>
        
      </div>
      
    </div>
  
</div>

虽然示例 用 ltr 和 rtl 演示这一点，但 :lang 在理论上可以 表现得像最深的匹配，例如使用 :lang(my-special-selector) 虽然这 可能不是 lang 属性应该如何使用。

Answer 2

看看这个：

div#b:first-of-type {
style here
}

Answer 3

按 ID 选择它们

#b, #d, #e {
 /* styles here */
}

顺便说一句，所有重复类名的任何原因？您可以将整个内容包装在#layout 的 div 中，然后执行...

#layout div {
 /* styles */
}

而不是将该类名添加到任何 div 中。

Answer 4

为什么不使用 :empty？

JQuery Empty

编辑：它也可以用作 CSS 选择器：

:empty { background-color: black; }

更多编辑：

:last-of-type 几乎可以工作，但由于某种原因它得到了“a”。看我的小提琴。

http://jsfiddle.net/DUdVR/3/

Answer 5

您可以使用 jQuery 选择器.rowsLayout:not(:has(.rowsLayout))。

但是，出于性能原因，this is not possible in CSS。

您的选择器取决于您定位的元素的子元素（或缺少子元素）。
CSS 的设计使得元素的选择器总是可以在元素的子元素存在之前被解析；这允许在加载文档时应用 CSS。

Answer 6

根据您拥有的 div 数量，您可以执行以下操作：

div#b.rowsLayout,div#d.rowsLayout,div#e.rowsLayout {}

也许有更好的方法来解决您的问题，您想对所有这些 div 应用什么？

Answer 7

没有。

您的选择是：按 id 选择它们；为这些叶子添加第二个类，并按该类选择；使用基于 javascript 的解决方案来设置适当的样式（可能使用第二类）。

Answer 8

您能否考虑为父项添加一个额外的类，例如“父项”？它会更容易，并且是“标准”