0

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

但问题是当我使用 Ember 动态生成项目时。该图不会在第一个、最后一个和唯一的子选择器上显示为 expeted。发生这种情况是因为 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 不适用。

4

1 回答 1

0

因此，为了解决这个问题，我将 CSS 中的唯一子选择器替换为 only-of-type

.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;
}

感谢您的帮助和评论

于 2013-10-24T20:09:44.350 回答