CSS的三大特性

duan199226 發(fā)布于2019-04-23 13:46 / 2262人閱讀

本文內(nèi)容：

層疊性
繼承性
優(yōu)先級(jí)

權(quán)重計(jì)算方法（特異性）

首發(fā)日期：2018-05-01

層疊性：

層疊性是指當(dāng)一個(gè)標(biāo)簽被設(shè)置了多個(gè)重復(fù)的樣式的時(shí)候，一個(gè)屬性會(huì)覆蓋另外一個(gè)屬性。
比如：先給div設(shè)置背景顏色為紅色，然后設(shè)置背景顏色為粉紅色，那么最終顏色可能為紅色，也可能為粉紅色（明顯的兩種顏色設(shè)置不能并立，所以只為其一，這里沒給出確定答案是因?yàn)檫€要考慮“優(yōu)先級(jí)”）

層疊性主要遵循的原則是就近原則，在不考慮優(yōu)先級(jí)的情況下，在多個(gè)樣式中最終生效的樣式是離標(biāo)簽最近的樣式。【這里要注意只覆蓋同樣的不可重復(fù)的樣式屬性，不會(huì)覆蓋不重復(fù)的屬性，不重復(fù)的屬性會(huì)合并下來（包括那些允許設(shè)置多個(gè)值的屬性也會(huì)合并，比如text-shadow）。】

示例：

依據(jù)層疊性的就近原則，第一個(gè)div的背景色為藍(lán)色，第二個(gè)div的背景色為綠色。

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
        div{
            background-color: red;
        }
        div{
            background-color: blue;
        }
    style>
head>
<body>
    <div>123div>  
    <div style="background-color: green;">123div>  
body>
html>

<title>Documenttitle> <style> div{ font-size:70px; background-color: #CCC; color:skyblue; } style> head> <body> <div> <p>p繼承div的樣式p> div> body> html> <title>Documenttitle> <style> /* 從上到下，依次注釋選擇器來測試優(yōu)先級(jí) */ div{ color:green!important; } #id1{ color:red; } .class{ color: blue; } div{ color:purple; } style> head> <body> <div>!import優(yōu)先級(jí)div> <div style="color:red">行內(nèi)樣式優(yōu)先級(jí)div> <div id="id1">id選擇器優(yōu)先級(jí)div> <div class="c1">類選擇器優(yōu)先級(jí)div> <div>標(biāo)簽選擇器優(yōu)先級(jí)div> body> html>

上面的規(guī)則!important和行內(nèi)樣式毫無疑問，但如果多個(gè)選擇器混雜來定義樣式的時(shí)候如何判斷他們的優(yōu)先級(jí)？答案是依據(jù)權(quán)重來判斷。

權(quán)重計(jì)算方法【可以稱為是css的特異性】：

幾個(gè)規(guī)則：

權(quán)重使用四個(gè)數(shù)字來衡量(x,x,x,x)【CSS2使用三位】
繼承的權(quán)重為(0,0,0,0)
標(biāo)簽選擇器的權(quán)重為(0,0,0,1)
類、偽類選擇器的權(quán)重為(0,0,1,0)
id選擇器選擇器的權(quán)重為(0,1,0,0)
行內(nèi)樣式的權(quán)重為(1,0,0,0)
!important的權(quán)重?zé)o限大

計(jì)算方法：

多個(gè)選擇器混雜時(shí)，權(quán)重之和也是用四個(gè)數(shù)字來組成，每一位的值為多個(gè)選擇器四個(gè)數(shù)字的每位之和，比如div:first-child的權(quán)重為(0,0,0,1)+(0,0,1,0)=(0,0,1,1)，比如div ul li 為(0,0,0,3),比如a:hover為(0,0,1,1)
權(quán)重之和的數(shù)制是不會(huì)進(jìn)位的，再多的標(biāo)簽選擇器權(quán)重加和也抵不過一個(gè)類選擇器。
多個(gè)選擇器之間的順序是無關(guān)的，不影響權(quán)重之和。
注意：對(duì)于并集選擇器來說不是權(quán)重的加和，因?yàn)槔碚撋纤€是獨(dú)立的，它只相當(dāng)于將多個(gè)選擇器的相同內(nèi)容歸于一個(gè)并集選擇器中，理論上每一個(gè)選擇器還是獨(dú)立的。 <title>Document
title> <style> div .p1{ background-color:blue; } p.p1{ background-color:green; }
style>
head> <body> <div> <p class="p1">123
p> div> body> html>
權(quán)重不同時(shí)，權(quán)重大的生效：

DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Documenttitle> <style> p.p1:first-child{ background-color:green; } div .p1{ background-color:blue; } style> head> <body> <div> <p class="p1">123p> div> body> html>

?

?

?