设计一个嵌套的HTML标签

Question

假设我们有一个<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> 

我想这有help-button，因为它的同胞类跨度chechbox-inline等级标识，获取padding-left: 0px;

Answer 1

从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或类要样式

Answer 2

下面的代码选择跨度的元素，设置样式

.checkbox-inline > .help-button { 
    padding-left: 100px; 
} 

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