使用CSS区分html div

时间:2017-06-28 18:18:38

标签: javascript html css react-select

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>

3 个答案:

答案 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';
}