我有一个class =’myTestClass’的元素 – 如何将CSS样式应用于这个元素的所有子元素。我只想把风格应用于元素的孩子。不是大孩子。
I could use .myTestClass > div { margin:0 20px; }
它适用于所有的小孩,但我想要一个适用于所有孩子的解决方案。我以为可以使用*,但是
.myTestClass > * { margin:0 20px; }
不行
添加:
.myTestClass> *选择器不适用于firefox 26中的规则,而根据firebug没有其他的边距规则。如果我用div替换*,它可以工作。
解决方法
如
David Thomas所述,这些子元素的后代将(可能)继承大多数分配给这些子元素的样式。
您需要将.myTestClass扭曲到一个元素内,并通过添加.wrapper * descendant selector将样式应用于后代,然后添加.myTestClass> * child selector应用风格的元素儿童,不是其大孩子。例如:
JSFiddle – DEMO
.wrapper * { color: blue; margin: 0 100px; /* Only for demo */ } .myTestClass > * { color:red; margin: 0 20px; }
<div class="wrapper"> <div class="myTestClass">Text 0 <div>Text 1</div> <span>Text 1</span> <div>Text 1 <p>Text 2</p> <div>Text 2</div> </div> <p>Text 1</p> </div> <div>Text 0</div> </div>