Overflow CSS Tree

Question

如何区分ul/li CSS树中的"没有孙子但有很多孩子的父母"（例如CSS3家谱示例）？

最终目标是使树适合8.5"x 11"，并能够处理李的超长文本。如果可以的话，我想坚持纯CSS（我不能100%确定生产环境是否允许jQuery/JS/等）

这是我上面例子中的CSS代码，稍作修改：

    * {
        margin: 0;
        padding: 0;
    }
    .tree {
        white-space: nowrap;
    }
    .tree ul {
        padding-top: 20px;
        position: relative;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }
    .tree li {
        float: none;
        display:inline-block;
        white-space: wrap;
        vertical-align:top;
        margin: 0 -2px 0 -2px;
        text-align: center;
        list-style-type: none;
        position: relative;
        padding: 20px 5px 0 5px;
    width: auto;
    margin-bottom: 10px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }
    .tree li span {
    }
    .tree li span.rotated {
        -ms-writing-mode: tb-rl; /* old syntax. IE */
        -webkit-writing-mode: vertical-rl;
        -moz-writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
        writing-mode: vertical-rl; /* new syntax */
    }
    .tree li::before, .tree li::after {
        content: '';
        position: absolute;
        top: 0;
        right: 50%;
        border-top: 1px solid #ccc;
        width: 50%;
        height: 20px;
    }
    .tree li::after {
        right: auto;
        left: 50%;
        border-left: 1px solid #ccc;
    }
    .tree li:only-child::after, .tree li:only-child::before {
        display: none;
    }
    .tree li:only-child {
        padding-top: 0px;
        float: none;
    }
    .tree li:first-child::before, .tree li:last-child::after {
        border: 0 none;
    }
    .tree li:last-child::before {
        border-right: 1px solid #ccc;
        border-radius: 0 5px 0 0;
        -webkit-border-radius: 0 5px 0 0;
        -moz-border-radius: 0 5px 0 0;
    }
    .tree li:first-child::after {
        border-radius: 5px 0 0 0;
        -webkit-border-radius: 5px 0 0 0;
        -moz-border-radius: 5px 0 0 0;
    }
    .tree ul ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        border-left: 1px solid #ccc;
        width: 0;
        height: 20px;
    }
    .tree li span {
        border: 1px solid #ccc;
        padding: 5px 10px;
        text-decoration: none;
        color: #666;
        font-family: arial, verdana, tahoma;
        font-size: 11px;
        display: inline-block;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

Answer 1

如何在ul/li CSS树中区分"没有孙子但有很多孩子的父母"

答案是，你不能用纯css但。

目前CSS中没有parent选择器。这里有一个类似的问题，它链接到其他几个类似的问题。CSS4可能会得到一个"父选择器"。