设置嵌套HTML标记的样式

时间:2017-04-07 15:35:12

标签: css

假设我们14.3 µsvm.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>

2 个答案:

答案 0 :(得分:0)

来自https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectorshttps://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)

以下代码选择范围和设置样式

UIWebView

这是工作的jsfiddle:https://jsfiddle.net/trtLf52b/