溢出CSS树

Question

如何在ul / li CSS树中区分“没有孙子女但有很多孩子的父母”（例如http://reporting.MYSITE.com/cgi-bin/rr/blank.gif?nourl=category-viewed&view_event=yes&view_category=category&view_name=Sale）？

最终目标是使树适合8.5“x 11”并且能够处理具有很长文本的li。如果可以的话，我想坚持使用纯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

  

我如何区分没有孙子女但有很多孩子的父母＆＃34;在ul / li CSS树

中

答案是，您不能使用纯粹的CSS ... 尚未。

目前CSS中没有parent选择器。 Here is a similar question, which links to several other similar questions。 CSS4可能会获得"parent selector"。