html - 仅当父元素在 Sass 中没有特定类时才绘制边框

Question

我想改变我的 SASS 代码的行为。当前的 SASS 代码总是在 focus 事件上绘制 border。它应该只在其父元素 select2-container 没有 select2-container--disabled 类时绘制 border。我该怎么做？

HTML

<select name="product" id="nbp__name-dropdown" class="form-control select2-hidden-accessible" disabled="" data-select2-id="nbp__name-dropdown" tabindex="-1" aria-hidden="true"></select>
<span class="select2 select2-container select2-container--default select2-container--disabled select2-container--focus" dir="ltr" data-select2-id="2" style="width: 377.5px;">
    <span class="selection">
        <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-labelledby="select2-nbp__name-dropdown-container">
            <span class="select2-selection__rendered" id="select2-nbp__name-dropdown-container" role="textbox" aria-readonly="true">
                <span class="select2-selection__placeholder">Select a product...</span>
            </span>
            <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
        </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>

SASS

.select2-selection--single {
  &:focus {
    border: 1px solid $focus-border-color;
  }
}

Answer 1

假设您仅将 select2-container--disabled 用作附加类，现在开始:

.select2-container {
  &:not(.select2-container--disabled) {
    .select2-selection--single {
      &:focus {
        border: 1px solid black;
      }
    }
  }
}

https://gist.github.com/franktopel/1779117580ea0bf5be02aee0e7e27258

.select2-container:not(.select2-container--disabled) .select2-selection--single:focus {
  border: 1px solid black;
}

<select name="product" id="nbp__name-dropdown" class="form-control select2-hidden-accessible" disabled="" data-select2-id="nbp__name-dropdown" tabindex="-1" aria-hidden="true"></select>
<span class="select2 select2-container select2-container--default select2-container--disabled select2-container--focus" dir="ltr" data-select2-id="2" style="width: 377.5px;" if="foo">
    <span class="selection">
        <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-nbp__name-dropdown-container">
            <span class="select2-selection__rendered" id="select2-nbp__name-dropdown-container" role="textbox" aria-readonly="true">
                <span class="select2-selection__placeholder">Select a product...</span>
            </span>
            <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
        </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>
<!-- not disabled -->
<select name="product" id="nbp__name-dropdown" class="form-control select2-hidden-accessible" disabled="" data-select2-id="nbp__name-dropdown" tabindex="-1" aria-hidden="true"></select>
<span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" data-select2-id="2" style="width: 377.5px;" id="bar">
    <span class="selection">
        <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-nbp__name-dropdown-container">
            <span class="select2-selection__rendered" id="select2-nbp__name-dropdown-container" role="textbox" aria-readonly="true">
                <span class="select2-selection__placeholder">Select a product...</span>
            </span>
            <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
        </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>