CSS具体性(特性或优先级)和继承

css的选中某个元素越具体，那么优先级就越高，class定位目标就比element元素命中目标更加详细和具体。

css的继承问题，some css property values 在父元素上，会被子元素继承，有些又不会被继承。。。。
比如 你在某个element上设置color和font-family ，那么它的子元素也会使用同样的color和font,除非你在子元素上设置了不同的value。
width这些属性是不会被继承的，如果宽度被继承，那css就乱套了。

哪些属性是默认继承的，哪些不是，这在很大程度上取决于常识。Which properties are inherited by default and which aren't is largely down to common sense.


1000分：inline style
100分： identify selector
10分： class selector、attribute selector and pseudo-class
1分：element selector and pseudo-element

Note: The universal selector (*), combinators (+, >, ~, ' '), and negation pseudo-class (:not) have no effect on specificity. 


css冲突声明按照下面的顺序，后面的覆盖前面的。Conflicting declarations will be applied in the following order, with later ones overriding earlier ones:

  1. Declarations in user agent style sheets (e.g. the browser's default styles, used when no other styling is set).
  2. Normal declarations in user style sheets (custom styles set by a user).
  3. Normal declarations in author style sheets (these are the styles set by us, the web developers).
  4. Important declarations in author style sheets
  5. Important declarations in user style sheets

It makes sense for web developers' stylesheets to override user stylesheets, so the design can be kept as intended, but sometimes users have good reasons to override web developer styles, as mentioned above — this can be achieved by using !important in their rules.



/* specificity: 0101 */
#outer a {
    background-color: red;
}
        
/* specificity: 0201 */
#outer #inner a {
    background-color: blue;
}

/* specificity: 0104 */
#outer div ul li a {
    color: yellow;
}

/* specificity: 0113 */
#outer div ul .nav a {
    color: white;
}

/* specificity: 0024 */
div div li:nth-child(2) a:hover {
    border: 10px solid black;
}

/* specificity: 0023 */
div li:nth-child(2) a:hover {
    border: 10px dashed black;
}

/* specificity: 0033 */
div div .nav:nth-child(2) a:hover {
    border: 10px double black;
}

a {
    display: inline-block;
    line-height: 40px;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    width: 200px;
    margin-bottom: 10px;
}

ul {
    padding: 0;
}

li {
    list-style-type: none;
}            
    

<div id="outer" class="container">
    <div id="inner" class="container">
        <ul>
            <li class="nav"><a href="#">One</a></li>
            <li class="nav"><a href="#">Two</a></li>
        </ul>
    </div>
</div>
阅读量: 902
发布于:
修改于: