我有一个带有标签的布局，里面有一个手风琴，另外还有一组标签。在每个内部选项卡内，我想要一组复选框。当我把它们放入并为它们设置样式时，它们与外部选项卡的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: "\2212";
float: left;
color: #fff;
font-size: 16px;
line-height: 16px;
margin-right: 8px
}
.access-privilages .panel-heading a.collapsed:after {
content: "\2b";
}
.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>
答案 0 :(得分：4)
这是因为:not与它所使用的元素有关。您的label没有.squaredFour类，但它是父级（div）。您应该为label添加课程或更改
label:not(.squaredFour)
到
*:not(.squaredFour) label
它将适用于每个label，它不是具有类.squaredFour的元素的后代（任何级别）。
答案 1 :(得分：2)
您的.squaredFour课程已应用于div而不是label，即label或input等级.squaredFour。有两种方法可以解决这个问题
将.squaredFour添加到您不想与input规则冲突的label和css。
或者，如果您不想添加课程，请在代码段中更改:not的css。
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>