假设我们14.3 µs
有vm.names = [{
'name': 'A'
}, {
'name': 'A'
}, {
'name': 'B'
}, {
'name': 'C'
}, {
'name': 'C'
}]
兄弟姐妹。现在我想选择span并在其上应用一些样式。说:
<ul ng-repeat ="name in vm.names | unique'name'>
<li>{{name.name}}</li>
</ul>
我希望标签上的班级<label>
与班级<span>
的班级相同,得到<label class="checkbox-inline" for="currentDate">
<input type="checkbox" checked="checked" id="currentDate" />
<span><spring:message code='Admin.News.NewsDate.CurrentDate' /></span>
</label>
<span tooltip="<spring:message code='Admin.News.NewsDate.Tooltip' />" class="help-button">?</span>
答案 0 :(得分:0)
来自https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors和https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors:
/*if you need to select the span, you can use the adjacent sibling (+) or general sibling (~) combinator*/
/*adjacent siblings*/
.checkbox-inline + .help-button{
background-color: red;
}
/*general siblings*/
.checkbox-inline ~ .help-button{
font-size: 2em;
}
/*if you need to select the label, you could use a parent structure, since sibling selectors only works on elements that come AFTER the sibling you specify*/
.parent .checkbox-inline{
background-color: blue;
}
<div class="parent">
<label class="checkbox-inline">
<input type="checkbox" />
</label>
<span class="help-button">?</span>
</div>
所有这些说明,对于要设置样式的元素使用额外的id或类可能会更容易
答案 1 :(得分:0)