Question

我有标签，我想删除样式＆＃34; border-bottom＆＃34;选项卡处于活动状态时的父元素。我怎么能这样做？我的代码：

＆＃13;

.content .tabs .tab {
	border: 1px solid #838c96;
	border-right: 0;
	z-index: 5;
}

.content .tabs .tab:first-child {
	border-right: 0;
}

.content .tabs .tab:last-of-type {
	border-right: 1px solid #838c96;
}

.content .tabs .tab a {
	color: #242221;
}

.content .tab .tab a.active:has(< .tab) {
	border-bottom: none;
}

＆＃13;

<ul class="tabs">
	<li class="tab col s3"><a class="active" href="#test1">Панели</a></li>
	<li class="tab col s3"><a href="#test2">Столбы</a></li>
	<li class="tab col s3"><a href="#test3">Т. характеристики</a></li>
	<li class="tab col s3"><a href="#test4">Инструкции</a></li>
	<li class="tab col s3"><a href="#test5">Сертификаты</a></li>
</ul>

＆＃13;

Result

Answer 1

CSS代表层叠样式表，因此您可以从上到下（父＆gt;孩子）设置HTML的样式，而不是相反。你可以根据它的孩子使用JQ

设置父母的样式

例如：

$("li.tab a").each(function(){
if($(this).hasClass("active")){
    $(this).parent().addClass("noborder")
}
});

.content .tabs .tab {
	border: 1px solid #838c96;
	border-right: 0;
	z-index: 5;
}

.content .tabs .tab:first-child {
	border-right: 0;
}

.content .tabs .tab:last-of-type {
	border-right: 1px solid #838c96;
}

.content .tabs .tab a {
	color: #242221;
}

.content ul li.tab.noborder{
  border:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">


<ul class="tabs">
	<li class="tab col s3"><a class="active" href="#test1">Панели</a></li>
	<li class="tab col s3"><a href="#test2">Столбы</a></li>
	<li class="tab col s3"><a href="#test3">Т. характеристики</a></li>
	<li class="tab col s3"><a href="#test4">Инструкции</a></li>
	<li class="tab col s3"><a href="#test5">Сертификаты</a></li>
</ul>
</div>

将noborder课程添加到li，其中有a个小组active。然后，在CSS中，将border:none添加到li.noborder

如何用css删除父样式？

1 个答案: