时间戳

首页 > 解决方案 > 仅当父元素在 Sass 中没有特定类时才绘制边框

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

问题描述

我想改变我的 SASS 代码的行为。当前的 SASS 代码总是绘制borderonfocus事件。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;
  }
}

标签： htmlcsssass

解决方案

只有当它的父元素 select2-container 没有 select2-container--disabled 类时，它才应该绘制边框。我怎样才能做到这一点？

我无法让你的代码在 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;
}

推荐阅读