HTML中的下面的select
都受到相同CSS代码的影响,但我需要应用不同的CSS代码来同时影响select
。我该怎么做呢?具体来说,我需要为每个属性提供不同的content
属性。目前,所有选择都具有所有这些CSS属性。
CSS:
&.has-value:not(.is-open) {
.Select-input {
position: relative;
&::before {
content: '+ Add';
position: absolute;
font-style: italic;
left: 5px;
top: 5px;
color: #bbb;
}
}
}
HTML:
<div className="job-desc-item">
<h4 className="section-heading">Skills:</h4>
<Select
multi
simpleValue
value={this.state.skillValue}
placeholder="+ Add skill"
options={this.state.skillOptions}
clearable={false}
autosize={false}
onChange={this.handleSkillsSelectChange.bind(this)}
/>
</div>
<div className="job-desc-item">
<h4 className="section-heading">Location:</h4>
<Select
multi
simpleValue
value={this.state.locationValue}
placeholder="+ Add location"
options={this.state.locationOptions}
clearable={false}
autosize={false}
onChange={this.handleLocationSelectChange.bind(this)}
/>
</div>
答案 0 :(得分:0)
这可能是一个简单的答案,也可能是一个我无法理解的非常复杂的问题。对于简单的情况,我会说你可以尝试在选择上设置id属性,或者使用class属性为它们指定不同的类名。在这两种情况下,您只需要为该选择器编写新的CSS规则。
如果问题是关于一个比我意识到的更复杂的案例,请更详细地解释一下以试图帮助你
答案 1 :(得分:0)
只需使用:nth-child
根据CSS的需要选择它们。 More details here
它看起来像
.job-desc-item:nth-child(1) {
/* your css */
}
.job-desc-item:nth-child(2) {
/* your css */
}
答案 2 :(得分:0)
我会给他们一个独特的类,或使用:nth-child()
选择器来选择唯一的父母。使用现有的CSS,然后使用类或content
选择器为要更改的元素:nth-child()
添加规则。
类
.Select-input {
position: relative;
&::before {
content: '+ Add';
position: absolute;
font-style: italic;
left: 5px;
top: 5px;
color: #bbb;
}
&.unique-class::before {
content: 'some content';
}
}
:nth-child()
.Select-input {
position: relative;
&::before {
content: '+ Add';
position: absolute;
font-style: italic;
left: 5px;
top: 5px;
color: #bbb;
}
}
.job-desc-item:last-child() .Select-input::before {
content: 'some content';
}