1

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>
4

3 回答 3

0

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

如果问题是关于一个比我想象的更复杂的案例，请更详细地解释它以帮助您

于 2017-06-28T18:32:42.003 回答
0

只需:nth-child根据 CSS 的需要使用来选择它们。更多细节在这里

它看起来像

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

.job-desc-item:nth-child(2) {
 /* your css */
}
于 2017-06-28T18:42:40.023 回答
0

我要么给他们一个独特的班级，要么使用:nth-child()选择器来选择独特的父母。content使用现有的 CSS，然后使用类或选择器为要更改的元素添加规则: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';
}
于 2017-06-28T20:38:04.520 回答