:not() 选择器不工作

Question

我有一个带有选项卡的布局，里面有一个手风琴和另一组选项卡。在每个内部选项卡中，我想要一组复选框。当我将它们放入并设置它们的样式时，它们与外部选项卡的 CSS 之间存在冲突。所以我使用了 not 选择器，这样选项卡的输入样式就不会应用于复选框，但它还没有被应用。

这是显示问题的 CodePen：CodePen

.wrap-tabs {
  section {
    display: none;
    padding: 20px 0 0;
    border-top: 1px solid #ddd;
  }
  input:not(.squaredFour) {
    display: none;
  }
  label:not(.squaredFour) {
    display: inline-block;
    margin: 0 0 -1px;
    padding: 15px 25px;
    font-weight: 600;
    text-align: center;
    color: #bbb;
    border: 1px solid transparent;
  }
  label:hover:not(.squaredFour) {
    color: #888;
    cursor: pointer;
  }
  input:checked+label:not(.squaredFour) {
    color: #555;
    border: 1px solid #ddd;
    border-top: 2px solid orange;
    border-bottom: 1px solid #fff;
  }
  #tab1:checked~#content1,
  #tab2:checked~#content2,
  #tab3:checked~#content3,
  #tab4:checked~#content4 {
    display: block;
  }
}

.access-privilages {
  padding: 10px;
}

.access-privilages .tabContent {
  padding: 10px;
}

.access-privilages .panel-heading a:after {
  font-family: 'Glyphicons Halflings';
  content: "12";
  float: left;
  color: #fff;
  font-size: 16px;
  line-height: 16px;
  margin-right: 8px
}

.access-privilages .panel-heading a.collapsed:after {
  content: "b";
}

.access-privilages .panel-group .panel+.panel {
  margin-top: 1px;
}

.access-privilages .panel-group .panel {
  border-radius: 0;
}

.access-privilages .panel {
  border: 0 none;
}

.access-privilages .panel-group .panel-heading+.panel-collapse>.panel-body {
  border-top: 0 none;
}

.access-privilages .panel {
  -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, .05);
  box-shadow: 0 0px 0px rgba(0, 0, 0, .05);
}

.access-privilages .panel-default>.panel-heading {
  color: #fff;
  border-radius: 0;
  background-color: @dark-subtle;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  color: @primary;
}

.squaredFour {
  position: relative;
  label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfff4;
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
  }
  label:after {
    content: '';
    width: 9px;
    height: 5px;
    position: absolute;
    top: 4px;
    left: 4px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  label:hover::after {
    opacity: 0.5;
  }
  input[type=checkbox] {
    visibility: hidden;
  }
  input[type=checkbox]:checked+label:after {
    opacity: 1;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="wrap wrap-tabs">
  <h4>Portal Settings</h4>
  <a ng-click="job.back()" class="backlink"><i class="fa fa-arrow-circle-o-left"></i> Go Back</a>
  <h1>Settings</h1>
  <p>Modify your portal-wide settings here</p>

  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1"><i class="fa fa-truck"></i> Delivery Rules</label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2"><i class="fa fa-truck"></i> Collection Rules</label>

  <input id="tab3" type="radio" name="tabs">
  <label for="tab3"><i class="fa fa-cog"></i> Global Settings</label>

  <input id="tab4" type="radio" name="tabs">
  <label for="tab4"><i class="fa fa-address-book"></i> Account Settings</label>

  <section id="content1">
    <h4>Delivery Rules</h4>

    <div class="access-privilages">
      <!-- Accordions -->
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse_hradmin">Economy</a>
            </h4>
          </div>
          <div id="collapse_hradmin" class="panel-collapse collapse in">
            <div class="panel-body">

              <!-- Tabs -->
              <ul class="nav nav-tabs">
                <li class="active">
                  <a id="personal" href="#tabContent_personal">Monday</a>
                </li>
                <li><a id="financial" href="#tabContent_financial">Tuesday</a></li>

              </ul>
              <div class="tabContent" id="tabContent_personal">
                <h4>Monday</h4>
                <div class="squaredFour">
                  <input type="checkbox" value="None" id="squaredFour" name="check" checked />
                  <label for="squaredFour"></label>
                </div>
              </div>
              <div class="tabContent" id="tabContent_financial" style="display: none;">
                <h4>Tuesday</h4>
              </div>

            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse_rmgadmin" class="collapsed">Next Day</a>
            </h4>
          </div>
          <div id="collapse_rmgadmin" class="panel-collapse collapse">
            <div class="panel-body">
              <!-- Tabs -->
              <ul class="nav nav-tabs">
                <li class="active">
                  <a id="nd-monday" href="#nextday-monday">Monday</a>
                </li>
                <li><a id="nd-tuesday" href="#nextday-tuesday">Tuesday</a></li>

              </ul>
              <div class="tabContent" id="nextday-monday">
                <h4>Monday</h4>
              </div>
              <div class="tabContent" id="nextday-tuesday" style="display: none;">
                <h4>Tuesday</h4>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>

  <section id="content2">
    <h4>Collection Rules</h4>
  </section>

  <section id="content3">
    <h4>Global Settings</h4>
  </section>

  <section id="content4">
    <h4>Account Settings</h4>
  </section>

</div>

Answer 1

这是因为:not与它所使用的元素有关。您的 label 没有 .squaredFour class，但它的父级 (div) 有。您应该将 class 添加到 label 或更改

label:not(.squaredFour)

到

*:not(.squaredFour) label

它将应用于每个 label 不是具有 class .squaredFour.

的元素的后代（任何级别）

Answer 2

您的 .squaredFour class 应用于 div 而不是 label 即没有 label 或 input 与 .squaredFour class。有两种方法可以解决这个问题

将 .squaredFour 添加到您不想与 css 规则冲突的 input 和 label。

或者，如果您不想添加 class，则将 css 更改为 :not，如代码段中所示。

input:not(.squaredFour > label) {
  display: none;
}

label:not(.squaredFour > label) {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

<input type="checkbox" class="labelFour" value="None" id="squaredFour" name="check" checked />
<label for="squaredFour" class="labelFour"></label>

:not() 选择器不工作

:not() selector not working

html

css

less