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类

回答

相关问题