使用 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

这可能是一个简单的问题和一个简单的答案，或者是一个我无法理解的非常复杂的问题。对于简单的情况，我会说你可以尝试在选择上设置 id 属性，或者使用 class 属性为它们指定不同的 class 名称。在这两种情况下，您只需要为该选择器编写新的 CSS 规则。

如果问题是关于一个比我能意识到的更复杂的案例，请更详细地解释它以试图帮助你

Answer 2

只需根据 CSS 的需要使用 :nth-child 到 select。 More details here

看起来像

.job-desc-item:nth-child(1) {
 /* your css */
}

.job-desc-item:nth-child(2) {
 /* your css */
}

Answer 3

我要么给他们一个独特的 class，要么使用 :nth-child() select 或者 select 独特的 parents。使用现有的 CSS，然后使用 class 或 :nth-child() select 或

为要更改的元素 content 添加规则

Class

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

使用 CSS 区分 html div

Distinguishing between html divs using CSS

html

javascript

css

react-select