在嵌套的DOM结构

时间：2017-01-03 08:11:30

标签： html css

我想仅为以下DOM的第一个div添加边框。但是边界适用于所有的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的解决方案。有什么帮助吗？

4 个答案:

答案 0 :(得分：2)

您可以尝试：

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

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

答案 1 :(得分：2)

我假设显示的HTML未包含在与ul相同的其他.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

答案 2 :(得分：1)

尝试如下。

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

JSFIDDLE

答案 3 :(得分：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>

相关问题
最新问题