Question

当我在导航项目列表之一上按下container时，该类变为“活动”类别，我又如何将该类别设置为<a>？或者我如何使用CSS从孩子那里获得父类？为此，我正在使用Bootstrap 4.0

<li>

Answer 1

标签上的活动类是由Bootstrap设置的，并且在li上设置类也需要js / jquery代码来侦听对li的点击并将该类手动添加到li标签。

在jquery中，它将类似于：

    $('li').click(function() {
      $(this).addClass('active');
    });

但是上述方法的问题是，在将类添加到单击的li元素之前，还必须删除以前处于活动状态的li元素上的活动类。

基于您要实现的目标，并且如果您可以描述为什么要将类添加到li元素，我们可以为您提供比此方法更好的方法。请尝试用更多细节描述您的问题，以便我们更好地帮助您。

Answer 2

不，那不可能。您可以为后代定义规则，例如

#myTab li {
    background-color: black;
}

或针对儿童，例如

#myTab > li {
    background-color: black;
}

但是您不能基于具有CSS的子代为父代定义规则。您将需要使用Javascript或考虑您的结构并对其进行重构。

Answer 3

目前，实际上不可能使用CSS从子级访问父类。

jQuery有一个:has()选择器，您可能要看一下。

当前与CSS选择器最接近的押注可能是:focus-within，这使您可以在单击时访问该父对象。但是，这与IE / Edge和某些其他移动浏览器不兼容。

$('.nav-item:has(.active)').addClass('highlight');
$('.nav-item:has(.active)').css('color','lime');

.highlight {
  background: red;
  /*what ever style u need*/
}

.item:focus-within {
  background: red;
  color: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>jQuery Selector</h1>
<li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Quality</a>
</li>
<li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Design</a>
</li>
<li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Programming</a>
</li>

<h1>CSS Selector (click To View)</h1>
<li class="item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Quality</a>
</li>
<li class="item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Design</a>
</li>
<li class="item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Programming</a>
</li>

如何通过子类名称引导动态导航？

3 个答案: