Question

我正在使用jquery tablider创建一个滑块，当单击它的手柄时，该滑块将从屏幕一侧滑出。我需要将样式应用于该div中的子元素，但必须仅在div打开时应用它。 div的类名是“tab-slider”，当它打开时，它是“tab-slider open”。我的问题是，是否可以创建一个仅在滑块打开时才应用于该元素的选择器？我还可以补充说，需要设置样式的元素是从这个父div开始的几个级别。

我正在寻找的选择器将是：

#tab-slider open #secondleveldiv #thirdleveldiv .element

Answer 1

.tab-slider{
    /* "Closed" state */
}  

.tab-slider.open{
    /* Open state. You chain classes in this way. */
}

在你的例子中：

.tab-slider.open #secondleveldiv #thirdleveldiv .element{
    /* This is an extremely specific selector. 
       Would .open #thirdleveldiv .element or even 
       .open .element work? Try to keep things only as specific 
       as they need to be. */
}

Answer 2

根据您的问题，当tab-slider为open时，您想为该元素创建一个选择器。

这是可能的。

您可以使用.tab-slider.open

记住：

如果班级名称处于同一级别，

<div class="tab-slider open">

然后使用

.tab-slider.open

中间没有空格。

如果班级名称处于不同的级别

<div class="tab-slider">

   <div class="open">

    </div>

</div>

然后使用

.tab-slider .open

中间有空格

Answer 3

您可以使用 CSS 或 Jquery ，假设您的子元素是p，例如：

.tab-slider.open p {color:red;}

使用Jquery

$('.tab-slider.open p').addClass('my-class');

<强> JSFiddle

选择器＆＃34;打开＆＃34;属性

3 个答案: