Question

我想更改我的SASS代码的行为。当前的SASS代码始终在border事件上绘制focus。仅当其父元素border没有select2-container类时，才应绘制select2-container--disabled。我该怎么办？

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>

Answer 2

仅当其父元素时才绘制边框 select2-container没有禁用select2-container的类。我该怎么办？

我无法让您的代码在CodePen中工作，所以我举了一个例子，因为我也很好奇您是否可以将：not与父母一起使用。如果我对您的理解很好，那么如果要边框元素的父级没有禁用的类，则您不想绘制边框。是在纯CSS中完成的，不涉及SASS：）

因此，此示例有效-中间段落将不带边框：

HTML

<html>
  <head>
  </head>

  <body>
    <div class="chalk">
      <p class="one">This one should be bordered</p>
    </div>
    <div class="chalk disabled">
      <p class="one">This one should not be bordered</p>
    </div>
    <div class="chalk">
      <p class="one">This one should be bordered</p>
    </div>
  </body>

CSS

div:not(.disabled) .one  {
  border: 1px solid black;
}

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

2 个答案:

HTML

CSS