灰烬车把和相邻的CSS选择器

灰烬把手与adjacent sibling CSS选择器（el + el）灰烬车把和相邻的CSS选择器

例如搞乱，我有一个项目清单：

{{#each item in items}}      
    <span class="item">{{item}}</span> 
{{/each}}

而且我想这两者之间添加间距规则：

.item + .item { 
    margin-left: 1em; 
}

但它不工作，因为灰烬中插入项目之间的Metamorph占位符（标签，如<script id="metamorph-1-end" type="text/x-placeholder"></script>）

我应该用什么来代替相邻的同级选择器和把手？

来源

2013-02-03 Valentin Nemcev

使用general sibling（或下一个兄弟）选择器（el ~ el）。

像这样：

.item ~ .item { 
    margin-left: 1em; 
}

它会 '跳过' 的Metamorph占位符标记和物品之间的任何其他标记。

来源

2013-02-03 12:56:11

这不会让你选择直接兄弟像邻近的选择：HTTP ：//www.w3.org/TR/CSS2/selector.html#adjacent-selectors –

是的，它具有不同的语义，但通常不重要。如果它很重要，还有另一种解决方案 –

使用Ember.CollectionView和相应的帮手，而不是{{#each}}

{{#collection contentBinding=items}}      
    <span class="item">{{this}}</span> 
{{/collection}}

它会在标签包装的一切（你可以用tagName参数自定义），但它不会项之间插入的Metamorph标签。

来源

2013-03-21 16:16:20

在我的情况下，我想使用下面的CSS，以便每当该项目上的课程从.mine切换到.theirs，反之亦然时，位置发生了变化。这是CSS邻接兄弟选择器的完美用例，但是对于在该选择器中使用ember来设置标记设置稍微复杂一些。

app.css

.mine + .theirs, 
.theirs + .mine { 
    margin-top: -50px; 
}

items.hbs

{{#collection Ember.CollectionView 
       contentBinding='controller.items' 
       itemViewClass='App.ItemView'}} 

    markup/content you want inside each EventView e.g., {{ this.name }} 

{{/collection}}

item_view.js

App.ItemView = Ember.View.extend({ 
    tagName: 'span', 
    classNames: ['item'], 
    classNameBindings: ['side'], 
    side: function() { 
    // Check a property on the item to see whose it is, 
    // set the class accordingly. 
    return this.get('context.isTheirs') ? 'theirs' : 'mine'; 
    }.property() 
});

来源

2013-04-09 21:33:15

灰烬车把和相邻的CSS选择器

回答

相关问题