CSS：简单地将样式应用于第一代儿童

我想将CSS样式应用于元素的第一个孩子。所以说我有一个div，有两个div，这是孩子，每个孩子都是他们自己的孩子，他们是孙辈。CSS：简单地将样式应用于第一代儿童

这的jsfiddle，我希望为我做了什么：http://jsfiddle.net/o8xhba9u/

#parent { 
    border: 1px solid; 
    padding: 10px; 
} 
#child-one { 
    text-indent: 5px; 
    padding: 10px; 
} 

#child-two { 
    text-indent: 5px; 
    padding: 10px; 
} 

#parent * { 
    border-top: 1px solid red; 
}

我的目标是只有孩子（儿童一个和孩子两）仅是那些用红色顶部。该段落元素（孙子）不应该有红色轮廓。我试图动态地实现这一点，就好像我要有不同的元素，并在稍后添加新元素，并且无需编辑CSS即可应用效果。我怎么能做到这一点？

来源

2014-08-31 CoderMusgrove

为什么不使用类，而不是ID：设置'.parent'和'.child'有'边框顶部：红色和'和'.grandchild {边境顶：无;}'将这些类添加到动态创建的元素？ – PhilD 2014-08-31 20:50:59

我只是Google'd使用类和ID之间的区别是什么，现在我已经整理出来了。感谢您指出了这一点！我是一个纯粹的设计师（我还没有学过JS或PHP），这对我没有多大意义，但现在它意味着更多。 ;） – CoderMusgrove 2014-08-31 23:02:37

您在寻找direct child combinator, >的。

Example Here

#parent > * { 
    border-top: 1px solid red; 
}

来源

2014-08-31 20:41:14

非常感谢。我已经看到这些子组合器的实例在使用，但我从未使用过它们。然后，我看了看W3Schools，看看他们是否拥有这些资源，并且我碰巧找到了这个页面：http://www.w3schools.com/css/css_combinators.asp – CoderMusgrove 2014-08-31 20:44:13

[我不会推荐W3Schools。]（http： //w3fools.com） – anroesti 2014-08-31 21:06:48

@anroesti好点。这就是为什么我链接到w3.org。 – 2014-08-31 21:09:37

CSS：简单地将样式应用于第一代儿童

回答

相关问题