1
我有一个标签的布局，里面有一个手风琴和另一个标签。在每个内部标签中，我想要一组复选框。当我将它们放入并对其进行设计时，它们与外部制表符的CSS之间存在冲突。所以我使用了非选择器，以便选项卡的输入样式不会应用到复选框，但它尚未应用。：不（）选择器不工作
这里有一个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>
SOOOO，选择是：不（）工作？哈哈......对不起。垃圾笑话。 –