Question

我一直在开发一个图表来显示相关项目：jsfiddle使用bootstrap 3.0。在这个例子中，我没有使用Ember。这是一个非常简单的例子。

但问题是当我使用Ember动态生成Items时。该图表不会显示为第一个，最后一个和唯一的子选择器。发生这种情况是因为ember在元素之前和之后添加了一个或两个脚本标记：

<div class="level closed" style="display: block;">
    <script id="metamorph-218-start" type="text/x-placeholder"></script><script id="metamorph-216-start" type="text/x-placeholder"></script>
    <div class="item">
    <span class="title"><script id="metamorph-219-start" type="text/x-placeholder"></script>Element name 1<script id="metamorph-219-end" type="text/x-placeholder"></script></span>
    </div>  
    <script id="metamorph-216-end" type="text/x-placeholder"></script><script id="metamorph-217-start" type="text/x-placeholder"></script>
    <div class="item">
    <span class="title"><script id="metamorph-220-start" type="text/x-placeholder"></script>Element name 2 <script id="metamorph-220-end" type="text/x-placeholder"></script></span>
    </div>  
    <script id="metamorph-217-end" type="text/x-placeholder"></script><script id="metamorph-218-end" type="text/x-placeholder"></script>
    </div>

因此我使用了：

.level >.item:nth-child(3):before {
    width: 10px;
    height: 50%;
    top: 50%;
    margin-top: 2px;
    border-top-left-radius: 10px;
}
.level >.item:nth-child(3):after {
    height: 10px;
    border-top-left-radius: 10px;
}

.level > .item:nth-last-child(3):before {
    width: 10px;
    height: 50%;
    border-bottom-left-radius: 10px;
}
.level >.item:nth-last-child(3):after {
    height: 10px;
    border-top: none;
    border-bottom: 2px solid #eee9dc;
    border-bottom-left-radius: 10px;
    margin-top: -7px;
}

问题是我只有一个孩子。没有余烬，我使用了以下css。

.item:only-child::after {
    border-bottom: 2px solid #eee9dc !important;
    border-left: 0px !important;
    border-bottom-left-radius: 0px !important;
    margin-top: -7px !important;
    width: 48px;
    left: -48px;
}

.item:only-child::before {    
    width: 0px !important;
}

但正如你所看到的那样，因为ember添加了这个脚本标签，所以没有唯一的孩子，这个css不适用。

Answer 1

所以要解决这个问题，我只在CSS中替换了只用于类型

的唯一子选择器

.item:only-of-type::after {
    border-bottom: 2px solid #eee9dc !important;
    border-left: 0px !important;
    border-bottom-left-radius: 0px !important;
    margin-top: -7px !important;
    width: 48px;
    left: -48px;
}

.item:only-of-type::before {    
    width: 0px !important;
}

感谢您的帮助和意见

使用余烬的垂直图

1 个答案: