CSS 问题 : What has precendence?

Question

我对 CSS 并不陌生，只是不太熟悉它。我今天遇到了一个“问题”，有一个子元素被父元素的 css 覆盖了。经过一番摸索之后，我意识到我需要做的就是添加一个 '! important' 到 css(向你展示我的能力对我来说是全新的)

(我已经放置了一个工作示例@，以生动的色彩说明了我的问题) http://jsfiddle.net/4RYM3/1/

#byIdName div{  /* #1 */
       margin: 30px;
    background:#FF00FF;
}
div#ByIdNameTwo{  /* #2 */
           margin: 30px;
     background:#00FF00;
}
div.idone{
    margin: 20px;
    background:#FFFF00;
}
div.idtwo{
    margin: 0px;
    background:#cccccc;
}
div.idone2{
    margin: 20px ! important;
    background:#FFFF00 ! important;
}
div.idtwo2{
    margin: 0px ! important;
    background:#cccccc ! important;
}

http://www.w3.org/TR/CSS2/cascade.html#specificity

现在看着这个，我无法理解为什么 #1 和 #2 的行为似乎不同(请查看上面的 jsfiddle 链接)。
虽然我很高兴我让这个工作(使用!重要)，但我对为什么#1 和#2 以他们现在的方式行事感到困惑.

任何人都可以阐明这种行为吗？

一种方法是首选方法而另一种方法被看不起吗？如果是，为什么(这是我的主要问题)？

提前致谢

Answer 1

它们的行为不同，因为 #byIdName div 指的是父级为 #byIdName 的 div 类型的任何子级

此 div#ByIdNameTwo 引用 ID 为 #byIdNameTwo 的任何 div

对于直接子级使用 #byIdName>div

对于任何 child ，包括孙子、曾孙……等等。使用

#byIdName div