設計一個嵌套的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/