我有这个选择器:
.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方式?
答案 0 :(得分: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 */
}
答案 1 :(得分:0)
再添加一个课程,并将其设置为.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()
答案 2 :(得分:0)
你可以这样做。 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>