1. 首頁
  2. 問答
  3. 在嵌套的DOM結構中隱藏一個具有特定類的div

在嵌套的DOM結構中隱藏一個具有特定類的div

2017-01-03 38 views
2

我想僅爲以下DOM的第一個div添加邊框。但邊界適用於所有的divs。在嵌套的DOM結構中隱藏一個具有特定類的div

<li class="x-tree-node"> 
    <div ext:tree-node-id="xnode-6" class="x-tree-node-el x-unselectable x-tree-node-expanded" unselectable="on"> 
    </div> 
    <ul class="x-tree-node-ct"> 
     <li class="x-tree-node"> 
      <div ext:tree-node-id="xnode-17" class="x-tree-node-el x-tree-node-leaf x-unselectable" unselectable="on"><span class="x-tree-node-indent"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-icon"></span><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-ec-icon x-tree-elbow"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-node-icon gx-tree-layer-icon" unselectable="on"> 
       <input class="x-tree-node-cb" type="checkbox" checked=""> 
      </div> 
      <ul class="x-tree-node-ct" style="display:none;"></ul> 
     </li> 
     <li class="x-tree-node"> 
      <div ext:tree-node-id="xnode-16" class="x-tree-node-el x-tree-node-leaf x-unselectable" unselectable="on"><span class="x-tree-node-indent"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-icon"></span><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-ec-icon x-tree-elbow"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-node-icon gx-tree-layer-icon" unselectable="on"> 
       <input class="x-tree-node-cb" type="checkbox" checked=""> 
      </div> 
      <ul class="x-tree-node-ct" style="display:none;"></ul> 
     </li> 
     <li class="x-tree-node"> 
      <div ext:tree-node-id="xnode-15" class="x-tree-node-el x-tree-node-leaf x-unselectable" unselectable="on"><span class="x-tree-node-indent"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-icon"></span><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-ec-icon x-tree-elbow"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-node-icon gx-tree-layer-icon" unselectable="on"> 
       <input class="x-tree-node-cb" type="checkbox" checked=""> 
      </div> 
      <ul class="x-tree-node-ct" style="display:none;"></ul> 
     </li> 
     <li class="x-tree-node"> 
      <div ext:tree-node-id="xnode-14" class="x-tree-node-el x-tree-node-leaf x-unselectable" unselectable="on"><span class="x-tree-node-indent"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-icon"></span><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-ec-icon x-tree-elbow"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-node-icon gx-tree-layer-icon" unselectable="on"> 
       <input class="x-tree-node-cb" type="checkbox" checked=""> 
      </div> 
      <ul class="x-tree-node-ct" style="display:none;"></ul> 
     </li> 
     <li class="x-tree-node"> 
      <div ext:tree-node-id="xnode-13" class="x-tree-node-el x-tree-node-leaf x-unselectable " unselectable="on"><span class="x-tree-node-indent"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-icon"></span><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-ec-icon x-tree-elbow-end"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-node-icon gx-tree-layer-icon" unselectable="on"> 
       <input class="x-tree-node-cb" type="checkbox" checked=""> 
      </div> 
      <ul class="x-tree-node-ct" style="display:none;"></ul> 
     </li> 
    </ul> 
</li>

我嘗試了以下方法。這些都不適合我。

.x-tree-node-el:nth-child(1){ 
    border: 1px solid red; 
} 
/* 
.x-tree-node-el ~ .x-tree-node-el { 
    border: none; 
}*/ 

/* 
#layerTree > .x-tree-node div:first-of-type { 
    display: none; 
}*/ 
/* 
#layerTree li.x-tree-node > div{ 
    display: none; 
} 

#layerTree li.x-tree-node > div ~ div { 
    display: block; 
}*/ 

/*.x-tree-node-el:first-of-type{ display:none; }*/

它必須是一個CSS唯一的解決方案。任何幫助？

來源

2017-01-03 Lalinda Sampath

+0

您的列表中的元素在裏面你需要這個類 「X-樹節點-EL」 在每一個DIV？ – avilac

+0

是的，我需要它在每一個div。不幸的是，我不能改變DOM結構和屬性，類。 –

+1

爲什麼不移除所有嵌套元素的邊界'.x-tree-node-el .x-tree-node-el {border：none}'; –

回答

2

我假設顯示不裹另一ul與同一類中的HTML作爲.x-tree-node-ct

.x-tree-node-el { border: 1px solid red; } 
.x-tree-node-ct .x-tree-node-el { border: 0 }

這將刪除所有邊框來自.x-tree-node-ct內的元素

工作Fiddle與您的示例代碼

來源

2017-01-03 08:23:55

2

你可以試試：

.x-tree-node-ct li:first-child div:first-child { 
    border: 1px solid red; 
}

https://jsfiddle.net/mpznd2pp/5/

來源

2017-01-03 08:16:55 Troyer

+0

無法更改DOM結構中的任何內容。 –

+0

@LindindaSampath現在是你的結構:) – Troyer

+0

它應該是第一個div與父李。 –

1

請嘗試如下。

.x-tree-node-ct li.x-tree-node:first-child div.x-tree-node-el { 
    border: 1px solid green; 
}

JSFIDDLE

來源

2017-01-03 08:26:47

0

試試這個

.x-tree-node-el:not(.x-tree-node-leaf){ 
    border: 1px solid red; 
} 


.x-tree-node-el:not(.x-tree-node-leaf){ 
 
    border: 1px solid red; 
 
}
<li class="x-tree-node"> 
 
    <div ext:tree-node-id="xnode-6" class="x-tree-node-el x-unselectable x-tree-node-expanded" unselectable="on"> 
 
    </div> 
 
    <ul class="x-tree-node-ct"> 
 
    <li class="x-tree-node"> 
 
     <div ext:tree-node-id="xnode-17" class="x-tree-node-el x-tree-node-leaf x-unselectable" unselectable="on"><span class="x-tree-node-indent"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-icon"></span> 
 
     <img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
 
     class="x-tree-ec-icon x-tree-elbow"> 
 
     <img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-node-icon gx-tree-layer-icon" unselectable="on"> 
 
     <input class="x-tree-node-cb" type="checkbox" checked=""> 
 
     </div> 
 
     <ul class="x-tree-node-ct" style="display:none;"></ul> 
 
    </li> 
 
    <li class="x-tree-node"> 
 
     <div ext:tree-node-id="xnode-16" class="x-tree-node-el x-tree-node-leaf x-unselectable" unselectable="on"><span class="x-tree-node-indent"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-icon"></span> 
 
     <img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
 
     class="x-tree-ec-icon x-tree-elbow"> 
 
     <img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-node-icon gx-tree-layer-icon" unselectable="on"> 
 
     <input class="x-tree-node-cb" type="checkbox" checked=""> 
 
     </div> 
 
     <ul class="x-tree-node-ct" style="display:none;"></ul> 
 
    </li> 
 
    <li class="x-tree-node"> 
 
     <div ext:tree-node-id="xnode-15" class="x-tree-node-el x-tree-node-leaf x-unselectable" unselectable="on"><span class="x-tree-node-indent"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-icon"></span> 
 
     <img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
 
     class="x-tree-ec-icon x-tree-elbow"> 
 
     <img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-node-icon gx-tree-layer-icon" unselectable="on"> 
 
     <input class="x-tree-node-cb" type="checkbox" checked=""> 
 
     </div> 
 
     <ul class="x-tree-node-ct" style="display:none;"></ul> 
 
    </li> 
 
    <li class="x-tree-node"> 
 
     <div ext:tree-node-id="xnode-14" class="x-tree-node-el x-tree-node-leaf x-unselectable" unselectable="on"><span class="x-tree-node-indent"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-icon"></span> 
 
     <img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
 
     class="x-tree-ec-icon x-tree-elbow"> 
 
     <img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-node-icon gx-tree-layer-icon" unselectable="on"> 
 
     <input class="x-tree-node-cb" type="checkbox" checked=""> 
 
     </div> 
 
     <ul class="x-tree-node-ct" style="display:none;"></ul> 
 
    </li> 
 
    <li class="x-tree-node"> 
 
     <div ext:tree-node-id="xnode-13" class="x-tree-node-el x-tree-node-leaf x-unselectable " unselectable="on"><span class="x-tree-node-indent"><img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-icon"></span> 
 
     <img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
 
     class="x-tree-ec-icon x-tree-elbow-end"> 
 
     <img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tree-node-icon gx-tree-layer-icon" unselectable="on"> 
 
     <input class="x-tree-node-cb" type="checkbox" checked=""> 
 
     </div> 
 
     <ul class="x-tree-node-ct" style="display:none;"></ul> 
 
    </li> 
 
    </ul> 
 
</li>

來源

2017-01-03 08:27:57

相關問題

 相關問題