Question

如：

<div class="mostOut">
    <div class="a">
        <h3 class="b"></h3>
        <div class="d"></div>
    </div>
</div>

如何同时向"moustOut"的孩子应用css样式。例如：

只有一个click event。css('opacity',1)可以同时适用于"a","b","d"。或者，排除"b"。

Answer 1

少一点代码

$('.mostOut').click(function()
{
   $(this).children("*").css('opacity', 1);
});

并排除“.b”

$('.mostOut').click(function()
{
   $(this).children("*").not(".b").css('opacity', 1);
});

或者如果它不是导致隐藏/无

的不透明度

$('.mostOut').click(function()
{
   $(this).children("*").show();
});

Answer 2

这可能是一个肮脏的解决方案，但它应该有效：

$('.mostOut').click(function()
{
  $(this).find('*').each(function()
  {
    $(this).css('opacity', 1);
  });
});

要排除除b元素以外的所有元素，请尝试以下操作：

$('.mostOut').click(function()
{
  $(this).find('*').not('.b').each(function()
  {
    $(this).css('opacity', 1);
  });
});

使用代码，因为我只是从头顶输入它，所以我不保证它会起作用。

祝你好运！

Answer 3

您是否考虑过使用100％CSS方法？

正如Nick Craver所指出的那样：“孩子们的父母不能有更大的不透明度， 为什么不在.mostOut元素上设置不透明度？ ”< / p>

HTML

<div class="mostOut">
  div class mostOut
  <div class="a">
    div class a
    <h3 class="b">h3 class b</h3>
    <div class="d">div class d</div>
  </div>
</div>

CSS

.mostOut{
  opacity:0.5;
}
.mostOut:active{
  opacity:1;
}

jsFiddle demo 1

或者， 使用CSS子选择器 （与上面相同的HTML）：

CSS

.mostOut:active > div{
  border:solid 1px gray;
  opacity:0.5;
}

jsFiddle demo 2

Answer 4

您可以使用rgba为每个元素设置不透明度。查看http://www.css3.info/preview/rgba/

如何同时向元素的所有子元素添加css样式？

4 个答案: