1
私は、タブを備えたレイアウトを持っています。アコーディオンが内側にあり、別のタブが内側にあります。各内側のタブの中には、一連のチェックボックスがあります。私がそれらを入れてスタイルを合わせると、外側のタブのためにCSSとCSSの間に矛盾があります。だから私はタブの入力スタイルがチェックボックスに適用されないが、それが適用されていないようにセレクタを使用しました。 ：not（）セレクタが動作しません
は、ここでの問題を示しているCodePenです：:notはそれが使われている要素に関するので
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>
サイコー、セレクタは：ではない（）作業？ハハ...すみません。悪い冗談。 –