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

Question

我的HTML中有一堆DIV元素，其中一些元素的class属性设置为“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

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

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

您的选择器取决于您定位的元素的孩子（或缺少）< 设计CSS是为了在元素的子元素存在之前始终可以解析元素的选择器。这允许CSS作为文档加载应用。

Answer 2

没有。

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

Answer 3

您是否可以考虑在父项目中添加额外的类（如“父”）？它会更容易，是“标准”

Answer 4

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

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

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

Answer 5

按ID

选择它们

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

所有重复类名称btw的任何原因？你可以将整个事情包装在#layout的div中，然后做一些事情......

#layout div {
 /* styles */
}

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

Answer 6

看看这个：

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

Answer 7

为什么不使用：空？

JQuery Empty

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

:empty { background-color: black; }

更多编辑：

:last-of-type几乎可以正常工作，但出于某种原因它会变成'a'。看我的小提琴。

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

Answer 8

看来这是可能的，使用：dir或：lang属性。

在2015年使用：lang是首选，因为大多数浏览器都支持它。

示例：

.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（deeppest-overrides-all）虽然可能不是lang = deepest-覆盖 - 所有都应该在元素上定义。