如何檢測DOM元素位置通過CSS選擇使用不同的CSS樣式

目前我有不同的DOM結構類似以下內容：如何檢測DOM元素位置通過CSS選擇使用不同的CSS樣式

的結構瀏覽器後轉化爲

No.1 
<div class="input-group"> 
    <span class="input-control">zzz</span> 
    <select class="form-control form-control single loading"></select> 
    <div class="selectize-control"> 
    <div class="selectize-input items has-options full has-items"></div> 
    <div class="selectize-dropdown form-control single"></div> 
    </div> 
</div> 

No.2 
<div class="input-group"> 
    <select class="form-control form-control single loading"></select> 
    <div class="selectize-control"> 
    <div class="selectize-input items has-options full has-items"></div> 
    <div class="selectize-dropdown form-control single"></div> 
    </div> 
    <span class="input-control">zzz</span> 
</div>

我想設置無.1。選擇 - 輸入新樣式 border-bottom-left-radius：0px; border-left-left-radius：0px;

並設置No.2 .selectize-輸入新樣式 border-bottom-right-radius：0px; border-right-right-radius：0px;

我該怎麼做？

感謝

來源

2014-03-31 Kun-yao Wang

能否請您詳細說明嗎？ –

當標籤位於標籤，然後使用B風格。清楚嗎？ ^^ –

@昆W王**後面**不**是隱藏**，雖然它應該是**之後**在這種情況下。 –

.input-group > .input-group-addon ~ div.selectize-control > .selectize-input { 
      .. 
} 



.input-group > div.selectize-control > .selectize-input { 
      .. 
}

來源

2014-04-09 08:41:32

由於跨度和selectized是兄弟姐妹，你可以使用兄弟選擇。並設置oposite occurence一個基本樣式，如果需要的話，將被覆蓋：

.input-group span { 
    background-color:red; 
} 
.input-group .selectized ~ span { 
    background-color:green; 
}

fiddle

來源

2014-03-31 17:51:46 vals

我想趕上.selectize輸入並設置一個新的風格~~我曾有過更新了問題內容，感謝您的時間 –

如何檢測DOM元素位置通過CSS選擇使用不同的CSS樣式

回答

相關問題