CSS的處理優先順序

技術小胖子發表於2017-11-03
CSS
瀏覽器在處理CSS程式碼時如遇到設定衝突，則按照以下優先順序處理：
1.Inline styles(行內樣式)；
2.Embedded styles(植入樣式)；
3.Linked styles(連結樣式)；
4.Imported styles(引入樣式)；
5.Default browser styles(預設瀏覽器樣式)。

如果同一種樣式中發生衝突怎麼處理？

1.本身樣式的優先順序高於繼承的樣式；
比如下面的例子中，<p>中的文字同時也繼承了<body>中的樣式，但是優先使用<p>中的樣式，為紅色。
 程式程式碼

<html>
<style type=”text/css”>
<!–
    body{color:blue}
    p{color:red}
–>
</style>
<head>
    <title>CSS</title>
</head>
<body>
    <h1>Hello!</h1>
    <p>Welcome to Magci`s BLOG! </p>
</body>
</html>


2.重複設定樣式時，優先處理最後一個設定
比如下面的例子中，<p>的樣式設定了兩個：紅色和黃色，瀏覽器優先處理最後一個，即<p>中的文字為黃色。
 程式程式碼

<html>
<style type=”text/css”>
<!–
    p{color:red}
    p{color:yellow}
–>
</style>
<head>
    <title>CSS</title>
</head>
<body>
    <h1>Hello!</h1>
    <p>Welcome to Magci`s BLOG! </p>
</body>

</html>




     本文轉自My_King1 51CTO部落格，原文連結：http://blog.51cto.com/apprentice/1360686，如需轉載請自行聯絡原作者






相關文章