CSS问题：什么有优先权？

我不是新来的CSS，我只是不太熟练。我今天遇到了一个'问题'，让子元素被父母的css覆盖。在一些头部划伤之后，我意识到我需要做的就是添加一个'！重要”的CSS（它向你展示我的能力是全新的我）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; 
}

现在看这个，我不明白为什么＃1和＃2似乎行为不同（请看上面的jsfiddle链接）。
虽然我很高兴我得到了这个工作（与！重要）我失去了为什么＃1和＃2的行为方式，他们是。

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

是一种首选的方法，另一种看不起，如果是的话，为什么（这是我的主要问题）？

在此先感谢

来源

2010-11-17 Harrison

这些不同的行为，因为#byIdName div是指与父母#byIdName型格的任何儿童

这div#ByIdNameTwo是指任何与DIV ID #byIdNameTwo

直飞儿童使用#byIdName>div

任何孩子，包括祖父子孙子等....等。使用

#byIdName div

来源

2010-11-17 20:40:59

没关系，所以他们是不一样的，但对孩子不应该有一个“>”？（http://www.w3.org/TR/CSS2/selector.html#child-selectors） - 这个级别的CSS对我来说是新的，所以我希望我的问题不是太小巧 – Harrison 2010-11-17 20:45:10

'''意味着该孩子从父母继承属性。 – 2010-11-17 20:47:10

明白了！（没有读得太远）http://www.w3.org/TR/CSS2/selector.html#descendant-selectors。谢谢 – Harrison 2010-11-17 20:48:44

的！重要的规则是一种方法，使你的CSS层叠，但也有你觉得是最重要的永远是适用的规则。

尽管基于浏览器的具体实现工作方式不同。

此处了解详情：http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

来源

2010-11-17 20:37:10 wajiw

哎鞣制，这是一个有点难以解释，但这里是我的尝试：

一般

，更具体的选择将覆盖更广泛的一个。 IDS意味着是非常具体（每页一个），类更一般（多达你每页要）。

因此，当您使用#byIdName div时，它将覆盖ID为'#byIdName'的元素内的任何div的类'.idtwo'，因为以id开头的声明更具体。

在第二种情况下，div#ByIdNameTwo仅引用具有该id的div，不影响子div。

我希望能解释它。

- 另外，我强烈建议你避免使用！重要的规则，因为它是以后维护代码的毒害（并且它表明程序员并不真正了解级联规则）。我不是说这是个人的冒犯，我曾经喜欢自己喜欢!important，但是它的黑客和更好的避免。

来源

2010-11-17 20:48:17

我想在这种情况下使用！重要的是肯定地表明程序员并不真正理解级联规则;但我会把你的建议放在心上。 – Harrison 2010-11-17 20:56:06

嘿，我们都开始不理解，你应该看到我的JavaScript。 :) – 2010-11-17 21:01:31

#byIdName div{ /* #1 */ 
     margin: 30px; 
    background:#FF00FF; 
}

该代码块仅针对具有“byIdName”属性的元素的INSIDE的div。

div#ByIdNameTwo{ /* #2 */ 
      margin: 30px; 
    background:#00FF00; 
}

这段代码只针对一个ID为“ByIdNameTwo”的div元素。如果它不是具有该ID的div，它将被忽略。

此外，ID选择器将覆盖类选择器，因为它更具体。添加“！重要”可以解决这个问题，但不推荐。使用“！重要”不是在有更好的替代品时应该鼓励的做法。

较好的解决办法是这样的：

#ByIdNameTwo.idone2 { 
    margin: 20px; 
    background: #FFFF00; 
}

作为附加的注释，尽量避免使用在你的CSS选择器不必要的元素（如在这种情况下“格”）。它实际上需要更长的CSS选择器引擎才能找到匹配这些类型的规则，而不仅仅是使用ID或类名称。

来源

2010-11-17 20:50:35 RussellUresti

CSS问题：什么有优先权？

回答

相关问题