Question

我有这个选择器：

.ui-widget-overlay
{
    background: #262b33;
    opacity: .70;
    filter: Alpha(Opacity=70);
}

我希望能够做到这样的事情：

.ui-widget-overlay
{
    background: #262b33;
    opacity: .70;
    filter: Alpha(Opacity=70);

    .container: 
    {
        -webkit-filter: blur(5px);
    }

}

这意味着，如果此选择器处于活动状态，请将此属性添加到容器中。

这可能吗？或者我应该采用JS方式？

Answer 1

<强> Demo

您可以使用属性选择器，如

div[class="ui-widget-overlay"] .container {....}

html / *例如* /

<div class="ui-widget-overlay">Test
    <div class="container">Container</div>
</div>

CSS

.ui-widget-overlay {
    background: #262b33;
    opacity: .70;
    filter: Alpha(Opacity=70);
}
div[class="ui-widget-overlay"] .container {
    -webkit-filter: blur(5px);
    color: red; /* added to see a visible change */
}

Answer 2

再添加一个课程，并将其设置为.container和.ui-widget-overlay -

.ui-widget-overlay.nowActive {
    background: #262b33;
    opacity: .70;
    filter: Alpha(Opacity=70);
}

.container.nowActive  {
    -webkit-filter: blur(5px);
}

使用JS / jQuery在需要时添加/删除.nowActice。

在jQuery中它 - .addClass()

Answer 3

你可以这样做。 http://jsfiddle.net/3p3j9/4/

.test1
{
    background:yellow;
    font-family:Arial;
}

.test1 > .test2
{
    background:cyan;
}

只有当容器位于主容器内时，容器才会应用该设计。

<div class='test1'>
    test12345
    <div class='test2'>
        test123
    </div>
</div>
<div class='test2'>
    test1234567
</div>

CSS“嵌套”如果 - 将属性添加到不同的类

3 个答案: