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属性为它们指定不同的类名。在这两种情况下，您只需要为该选择器编写新的CSS规则。

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

Answer 2

只需使用:nth-child根据CSS的需要选择它们。 More details here

它看起来像

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

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

Answer 3

我会给他们一个独特的类，或使用: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';
}

使用CSS区分html div

3 个答案: