CSS

Question

有没有办法通过css选择第二个孩子有什么活跃课程？当活动课程将不断更改时。

<div>
    <div class="owl-item"></div>
    <div class="owl-item"></div>
    <div class="owl-item"></div>
    <div class="owl-item active"></div>
    <div class="owl-item active"></div>
    <div class="owl-item active"></div>
    <div class="owl-item"></div>
    <div class="owl-item"></div> 
</div>

Answer 1

不，我认为CSS不可能。但是有可能用JS，

let owlItem = document.querySelectorAll(".owl-item.active");
let SecondActive_owlItem = owlItem[1]; // 1 is second item in array

Answer 2

我并不完全理解这个问题，但这里有一些想法。

CSS

尝试阅读CSS选择器。使用CSS选择器有很多方法可以选择特定元素。您的案件可能涉及第n个子选择器。

参考文献：
CSS Selectors - SitePoint
CSS Selectors Reference - W3Schools

JQuery的

如果您了解一些JQuery，可以尝试以下方法：
首先，为您的父母提供一个ID（让我们说test）

<div id="test">
    <div class="owl-item"></div>
    <div class="owl-item"></div>
    <div class="owl-item"></div>
    <div class="owl-item active"></div>
    <div class="owl-item active"></div> <!-- From what I understand, this is the target -->
    <div class="owl-item active"></div>
    <div class="owl-item"></div>
    <div class="owl-item"></div> 
</div>

现在，您可以使用以下JQuery脚本选择目标。对于这个，我将它放在$('document').ready()事件中，但你可以把它放在任何其他事件中。

$('document').ready(function() {
  var actives = $('#test').children('.active'); // This returns an array of all the '#test' children that have the '.active' class 
  if(actives[1]) {// We check that there is a second children 
    // Do stuff, for example:
    $(actives[1]).css('display', 'none'); // actives[1] is surrounded by $() because it is a DOM element
  }
});

按css选择项目

2 个答案:

CSS

JQuery的