javascript - 使用 CSS 区分 html div

Question

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>

Answer 1

我要么给它们一个唯一的类，要么使用 :nth-child() 选择器来选择唯一的父级。使用现有的 CSS，然后使用类或 :nth-child() 选择器为要更改的元素 content 添加规则。

类别

.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';
}