CSS - 另一個DIV類

設定輸入的背景我有這個簡單的形式：CSS - 另一個DIV類

<div class="form-group"> 
    <label>Date:</label> 
    <div class="input-group date"> 
    <div class="input-group-addon"> 
     <i class="fa fa-calendar"></i> 
    </div> 
    <input type="text" class="form-control"> 
    </div> 
</div> 

<div class="form-group"> 
    <label for="name">Name</label> 
    <input type="text" id="name" class="form-control"> 
    </div>

我需要設置背景顏色，當form-group有input-group-addon。在這個例子中：第一個輸入有背景色，最後沒有。

這是我的CSS：

.form-group:has(.input-group-addon) > input{ 
     background: yellow; 
    }

哪裏是我的問題嗎？由@Ilya

來源

2017-09-27 bluray

'：has'尚未被瀏覽器支持...嘗試'.FORM組。輸入組 - 插件> input' – Chiller

而且，即使'：has'人支持，'input'不是'.form-group'的直接子元素，所以'>'combinator不會匹配它 –

，因爲'input'是'.input-group-addon'的後續兄弟，我建議使用下面的選擇器：'.form-group .input-group-addon + input'（注意兄弟組合子''''，也可能'''，而不是子組合子'''）。 –

你會需要這個選擇：

.form-group .input-group-addon + input{ 
    background: yellow; 
}

編輯。你可以做這樣的事情

if($('.form-group').find('input-group-addon').length !== 0) { 
    $('.form-group').css("background-color", "yellow"); 
}

來源

2017-09-27 09:19:49

在該示例中'input'不是'.input-group-addon'的子節點，所以選擇器將不起作用。我會用'.form-group .input-group-addon + input'取代它。 –

不知何故，我錯過了...好點@IlyaStreltsyn –

提到如果你願意，你可以設置從jQuery的背景顏色以及固定選擇：

來源

2017-09-27 09:29:05

CSS - 另一個DIV類

回答

相關問題