CSS樣式表及選擇器相關內容(一)

CSS（Cascading Style Sheets）層疊樣式表
1.CSS級聯-CSS層疊：
規定在哪一個HTNL中使用哪一個樣式。

body{
    font-size:16px; //body默認字體大小
}

View Code

2.HTML中css樣式的使用方式：
a.外部樣式表：

<link rel="stylesheet" type="text/css" href="css文件路徑">
<style type="text/css">
    /*導入外部樣式：放在第一行去導入*/
    @import url(./style/div.css);
</style>

View Code

b.內部樣式表：

<style type="text/css">
    
</style>

View Code

c.行內樣式表：

<div style="color:#fff;">

View Code

d.@import 導入
    能夠再css文件中導入css文件也能夠在html文件中導入一個css文件

   <style type="text/css">
        /*導入外部樣式：放在第一行去導入*/
        @import url(./style/div.css);
        div{
            color: coral;
        }
    </style>

View Code

3.CSS選擇器：選中匹配的元素，而後進行樣式的設置（權值、權重、特性值）
    *廣泛選擇器
    style屬性內：權值：1000
    id選擇器：權值100
    class選擇器：權值10      僞類選擇器：權值10
    標籤選擇器 div h1：權值1     僞元素選擇器 ：權值1
    空格 + > ~：權值0
    組合選擇器：div,span
    嵌套選擇器：div.one   class屬性值爲one的div元素
                div .one div後代class屬性值爲one的元素
    後代選擇器：
        空格：全部後代
        >   :子代
        兄弟選擇器：
            +：下一個兄弟元素
            ~：後面的全部兄弟元素
    屬性選擇器：
        [attr] 選中標籤中還有attr屬性的元素
        [attr=val] 選中屬性值爲val的元素
        [attr^=val] 選中屬性值以val開始的元素
        [attr$=val] 選中屬性值以val結尾的元素
        [attr*=val] 選中屬性值中包含val字符串的元素
        [attr~=val] 選中屬性值中有一個值爲val的元素

    選擇器的優先級：id選擇器>class選擇器>標籤選擇器>*普通選擇器



4.級聯比較
css級聯，權重的優先，相同則就近原則

採用就近原則，對於要修飾的元素權值相同，在使用的各類css樣式中哪一種修飾裏標籤更近則採用哪一種樣式來進行修飾（就近原則）
但有一種狀況除外：標籤自身屬性的寬高，若在css樣式中從新修飾則會再用css中的樣式div1 {color: red;} /*標籤,權值爲1*/

即：採用樣式的優先級：標籤自身屬性最弱，行內樣式最強，而外部樣式表、內部樣式表、@import導入則採用就近原則(離修飾標籤近的優先使用)
注：標籤自身屬性及標籤樣式屬性

eg：
    嵌套選擇器：權值累加比較  

    div1 span {color: green;} /*兩個標籤,權值爲1+1=2*/
 
    div1>span {color: purple;} /*權值與上面的相同,所以採起就近原則*/
 
    .div1 {color: white;} /*類選擇符,權值爲10*/
 
    div1 span.success {color: purple;} /*權值爲1+1+10=12*/

View Code

附加知識：
    加了!important 那麼它的優先級會比較高，將不去看起權值和考慮就近原則，ie6不兼容，沒法識，不推薦使用。
    eg:   

 div1 {
        color:red !important; /*除了ie6，其餘瀏覽器會認爲紅色優先級高，顯示紅色字體*/
        color:green; /*ie6瀏覽器則順序讀取css因此顯示綠色*/
        }

View Code

 

5.DOM（文件對象模型：document object model）     
DOM樹：
元素節點、註釋節點、屬性節點
相關知識點：原生JS JQuery React Vue AngularJS

6.後代選擇器
相同標籤元素的後代或兄弟元素優先級仍聽從CSS選擇器中優先級，與其在樣式表中的前後出現順序無關
採用層次選擇器時,優先次序按照其CSS選擇器權值累加和的大小來決定,如上第3點：CSS選擇器 所示
eg:   

<style type="text/css">
        /*id爲p2的下一個兄弟節點*/
        #p2+span{
            border: 1px dotted red;
        }

        /*id爲p2的全部的兄弟節點*/
        /*#p2~*:權值100<#p2+span(權值:100+1)  則其不會覆蓋#p2+span中的樣式屬性*/
        #p2~*{
            border: 1px solid blue;
        }

        /*#p2~span:權值:100+1=#p2+span(權值:100+1)採用就近原則  則其會覆蓋#p2+span中的樣式屬性*/
        #p2~span{
            border: 1px solid blue;
        }
</style>    

View Code

 做者：nzc   出處：https://www.cnblogs.com/nzcblogs/ 歡迎轉載，也請保留這段聲明。謝謝！文本中若敘述有誤還請見諒！！！ 

歡迎評論！！！ 讓咱們共同進步。