Html 仅当父元素没有'；在Sass中没有特定的类_Html_Css_Sass

Html 仅当父元素没有'；在Sass中没有特定的类

html css sass

Html 仅当父元素没有'；在Sass中没有特定的类,html,css,sass,Html,Css,Sass,我想更改我的SASS代码的行为。当前SASS代码总是在focus事件上绘制边框。当其父元素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-

我想更改我的SASS代码的行为。当前SASS代码总是在

focus

事件上绘制

边框。当其父元素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>

假设您仅将select2 container--disabled
用作附加类，那么您可以：
.select2-container {
  &:not(.select2-container--disabled) {
    .select2-selection--single {
      &:focus {
        border: 1px solid black;
      }
    }
  }
}



.select2容器：非（.select2容器--已禁用）。select2选择--单个：焦点{
边框：1px纯黑；
}

选择一个产品。。。
选择一个产品。。。
假设您使用的是select2 container--disabled
仅作为一个附加类，那么您可以：
.select2-container {
  &:not(.select2-container--disabled) {
    .select2-selection--single {
      &:focus {
        border: 1px solid black;
      }
    }
  }
}



.select2容器：非（.select2容器--已禁用）。select2选择--单个：焦点{
边框：1px纯黑；
}

选择一个产品。。。
选择一个产品。。。

仅当其父元素
select2容器没有select2容器--disabled类。
我该怎么做
我无法让您的代码在CodePen中工作，所以我编了一个例子，因为我还想知道您是否可以使用：而不是与家长一起使用。如果我理解得很好，那么如果要加边框的元素的父元素没有禁用的类，您就不希望绘制边框。直接用CSS实现，不涉及SASS:）
因此，本例有效-中间段落不带边框：
HTML
仅当其父元素
select2容器没有select2容器--disabled类。
我该怎么做
我无法让您的代码在CodePen中工作，所以我编了一个例子，因为我还想知道您是否可以使用：而不是与家长一起使用。如果我理解得很好，那么如果要加边框的元素的父元素没有禁用的类，您就不希望绘制边框。直接用CSS实现，不涉及SASS:）
因此，本例有效-中间段落不带边框：
HTML
如果您检查代码段，就会发现它是有效的。点击“选择产品”进行测试。当然，你需要用我的代码替换你现有的方法。如果你检查代码片段，你会发现它是有效的。点击“选择产品”进行测试。当然，你需要用我的代码替换你现有的方法。为什么不让你的代码成为一个可运行的代码段呢？同样，你的第二个p.one
的文本可能不应该包含。为什么不让你的代码成为一个可运行的代码段呢？另外，你的第二个p.one的文本也可能不涉及。
<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>

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