CSS study notes (x) style coverage rules

Sometimes CSS is really very naughty, obviously we have to an element specified style, but without any change in the page

Then we will consider whether or not covered elsewhere specified style currently specified style it?

So look at the style cover rules is still very necessary, for an attribute of an element in terms of performance out of style will follow the following rules

(1) Inline style> internal stylesheet / Waibuyangshibiao

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title { color: red; } /* 内部样式表 */
    </style>
</head>
<body>
    <div style="color: green;" id="title"> <!-- 内联样式 -->
        Hello World
    </div>
</body>
</html>

[Final results (inline styles take precedence)] Hello World

(2) within the stylesheet / external style sheet, the style specified directly> ancestor inheritance pattern

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title { color: red; }
        span { color: green; } /* 直接指定 span 标签样式 */
    </style>
</head>
<body>
    <div id="title">
        <span>Hello World</span> <!-- span 标签也会继承 div 标签的样式 -->
    </div>
</body>
</html>

[Final results (direct style specified priority)] Hello World

(3) For direct the specified style, weight greater priority; if the same weight, defined priority after [important]

When specifying the style of conflict, the comparison large weights according to the priority value of the size of the defined pattern selector weight

Right selector value is calculated defined as follows:

id selector >> >> class selector tag selector, where the same type of the same weight selector

Descendant selector value is equal to the weight levels of the selector and it contains weights

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title span { color: red; } /* 后代选择器 = id 选择器（#title） + 标签选择器（span） */
        #intro { color: green; } /* id 选择器（#intro） */
    </style>
</head>
<body>
    <div id="title">
        <span id="intro">Hello World</span> <!-- id 选择器 + 标签选择器 > id 选择器 -->
    </div>
</body>
</html>

[The final effect (weight greater priority)] Hello World

(4) For the inherited ancestral style, recently ancestor priority

When you inherit ancestral style of conflict, to compare the relationship inherited recent ancestor priority

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title { color: red; }
        #intro { color: green; }
    </style>
</head>
<body>
    <div id="title"> <!-- 对于下面的 span 标签来说，在继承树上距离较远 -->
        <div id="intro"> <!-- 对于下面的 span 标签来说，在继承树上距离较近 -->
            <span>Hello World</span>
        </div>
    </div>
</body>
</html>

[Final results (most recent ancestor of priority)] Hello World

(5)! Important declaration disregard the above rules that specify the style will never be covered [important]

In fact, this argument perhaps a little inaccurate, because (and only)! Important declaration can cover! Important declaration

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title { color: red!important; } /* 加上 !important 声明的内部样式表 */
    </style>
</head>
<body>
    <div style="color: green;" id="title"> <!-- 内联样式 -->
        Hello World
    </div>
</body>
</html>

[Final results (! Important declaration takes precedence)] Hello World

[Read More CSS series, see the CSS study notes ]

CSS study notes (x) style coverage rules

Guess you like