摘要：前端技術之詳解第二天華文中宋基礎選擇器負責結構，負責樣式，負責行為。微軟雅黑瀏覽器的市場占有率瀏覽器打分兒子選擇器測試工具的兒子。表示選擇下一個兄弟微軟雅黑選擇上的是元素后面緊挨著的第一個兄弟。

前端技術之_CSS詳解第二天

1、css基礎選擇器

html負責結構，css負責樣式，js負責行為。

css寫在head標簽里面，容器style標簽。

先寫選擇器，然后寫大括號，大括號里面是樣式。

常見屬性：

    h1{
            color:blue;
            font-size: 60px;
            font-weight: normal;
            text-decoration: underline;
            font-style: italic;
        }    

1.1 標簽選擇器

就是用標簽名來當做選擇器。

1） 所有標簽都能夠當做選擇器，比如body、h1、dl、ul、span等等

2） 不管這個標簽藏的多深，都能夠被選擇上。

3） 選擇的是所有的，而不是某一個。所以是共性，而不是特性。

比如網易，希望頁面上所有的超級鏈接都沒有下劃線：

        a{
            /*去掉下劃線：*/
            text-decoration: none; 
        }

1.2 id選擇器

#表示選擇id

1  #lj1{
2  font-size: 60px;
3  font-weight: bold;
4  color:black;
5  }

1）任何的標簽都可以有id，id的命名要以字母開頭，可以有數字、下劃線。大小寫嚴格區別，也就是說mm和MM是兩個不同的id。

2）同一個頁面內id不能重復，即使不一樣的標簽，也不能是相同的id。也就是說，如果有一個p的id叫做haha，這個頁面內，其他所有的元素的id都不能叫做haha。

1.3 類選擇器

    
    
    


    
我是一個h3啊
    
我是一個h3啊
    
我是一個h3啊
    
我是一個段落啊
    
我是一個段落啊
    
我是一個段落啊

.就是類的符號。類的英語叫做class。

所謂的類，就是class屬性，class屬性和id非常相似，任何的標簽都可以攜帶class屬性。

class屬性可以重復，比如，頁面上可能有很多標簽都有teshu這個類：

1  
我是一個h3啊
2  
我是一個h3啊
3  
我是一個h3啊
4  
我是一個段落啊
5  
我是一個段落啊
6  
我是一個段落啊

css里面用.來表示類：

1  .teshu{
2  color: red;
3  }

同一個標簽，可能同時屬于多個類，用空格隔開：

1 
我是一個h3啊

這樣，這個h3就同時屬于teshu類，也同時屬于zhongyao類。

初學者常見的錯誤，就是寫成了兩個class：

1 
我是一個h3啊

所以要總結兩條：

1） class可以重復，也就是說，同一個頁面上可能有多個標簽同時屬于某一個類；

2） 同一個標簽可以同時攜帶多個類。

類的使用，能夠決定一個人的css水平。

1） 不要去試圖用一個類名，把某個標簽的所有樣式寫完。這個標簽要多攜帶幾個類，共同造成這個標簽的樣式。

2） 每一個類要盡可能小，有“公共”的概念，能夠讓更多的標簽使用。

正確使用公共類：案例

    
    
    


    
段落1
    
段落2
    
段落3

1.4到底用id還是用class？

答案：盡可能的用class，除非極特殊的情況可以用id。

原因：id是js用的。也就是說，js要通過id屬性得到標簽，所以我們css層面盡量不用id，要不然js就很別扭。另一層面，我們會認為一個有id的元素，有動態效果。

就是一個標簽，可以同時被多種選擇器選擇，標簽選擇器、id選擇器、類選擇器。這些選擇器都可以選擇上同一個標簽，從而影響樣式，這就是css的cascading“層疊式”的第一層含義。

2、css高級選擇器

2.1 后代選擇器

    
    
    


    

        

            

                
段落
                
段落
                
段落
            
            

                
段落
                
段落
                
段落
            
            

                
段落
                
段落
                
段落
            
        
    

    

        
段落
        
段落
        
段落
    

1  

空格就表示后代，.div1 p 就是.div1的后代所有的p。 

強調一下，選擇的是后代，不一定是兒子。

例如：

1    

2        

3            

4                
段落
5                
段落
6                
段落
7            
8        
    

后代選擇器，就是一種平衡：共性、特性的平衡。當要把某一個部分的所有的什么，進行樣式改變，就要想到后代選擇器。

后代選擇器，描述的是祖先結構。

能夠被下面的選擇器選擇上：

1  .div1 p{

2  color:red;

}

所以，看見這個選擇器要知道是后代，而不是兒子。選擇的是所有.div1“中的”p，就是后代p。

2.2 交集選擇器

    
    
    


    
我是標題
    
我是標題
    
我是標題
    
我是段落
    
我是段落
    
我是段落
    aaa

選擇的元素是同時滿足兩個條件：必須是h3標簽，然后必須是special標簽。

交集選擇器沒有空格。

交集選擇器，我們一般都是以標簽名開頭，比如div.haha  比如p.special。

2.3 并集選擇器（分組選擇器）

    
    
    


    
我是一個標題
    
是一個段落
    

        
我是一個列表
    

1 h3,li{
2  color:red;
3 }

 用逗號就表示并集。

2.4 通配符*

    
    
    


    
段落
    
標題
    

        
列表
        
列表
        
列表
    

*就表示所有元素。

1 *{
2  color:red;
3 }

效率不高，如果頁面上的標簽越多，效率越低，所以頁面上不能出現這個選擇器。

3、一些CSS3選擇器

3.1 兼容問題介紹

我們現在給大家介紹一下瀏覽器：

IE： 微軟的瀏覽器，隨著操作系統安裝的。所以每個windows都有IE瀏覽器。

　　windows xp 操作系統安裝的IE6

　　windows vista 操作系統安裝的IE7

　　windows 7 操作系統安裝的IE8

　　windows 8 操作系統安裝的IE9

　　windows10 操作系統安裝的edge

瀏覽器兼容問題，要出，就基本上就是出在IE6、7身上，這兩個瀏覽器是非常低級的瀏覽器。

瀏覽器的市場占有率： http://tongji.baidu.com/data/

HTML5瀏覽器打分：

http://html5test.com/results/desktop.html

3.2 兒子選擇器>

http://www.ietester.cn/   測試工具

1 div>p{
2  color:red;
3 }

div的兒子p。和div的后代p的截然不同。

3.3 序選擇器

IE8開始兼容；IE6、7都不兼容

選擇第1個li：

1  

選擇最后一個1i：

1  ul li:last-child{
2  color:blue;
3  }

由于瀏覽器的更新需要過程，所以現在如果公司還要求兼容IE6、7，那么就要自己寫類名：

1    

2        
項目
3        
項目
4        
項目
5        
項目
6        
項目
7        
項目
8        
項目
9        
項目
10        
項目
11        
項目
    

用類選擇器來選擇第一個或者最后一個：

1        ul li.first{
2            color:red;
3        }
4
5        ul li.last{
6            color:blue;
        }

3.4 下一個兄弟選擇器

IE7開始兼容，IE6不兼容。

+表示選擇下一個兄弟

1    

選擇上的是h3元素后面緊挨著的第一個兄弟。

1    
我是一個標題
2    
我是一個段落
3    
我是一個段落
4    
我是一個段落
5    
我是一個標題
6    
我是一個段落
7    
我是一個段落
8    
我是一個段落
9    
我是一個標題
10    
我是一個段落
11    
我是一個段落
12    
我是一個段落
    
我是一個標題

4、CSS的繼承性和層疊性

4.1 繼承性

有一些屬性，當給自己設置的時候，自己的后代都繼承上了，這個就是繼承性。

哪些屬性能繼承？

color、 text-開頭的、line-開頭的、font-開頭的。

這些關于文字樣式的，都能夠繼承； 所有關于盒子的、定位的、布局的屬性都不能繼承。

所以，如果我們的頁面的文字，都是灰色，都是14px。那么就可以利用繼承性：

1 body{
2     color:gray;
3     font-size:14px;
4 }

繼承性是從自己開始，直到最小的元素。

5.2 層疊性

很多公司如果要筆試，那么一定會考層疊性。

層疊性：就是css處理沖突的能力。 所有的權重計算，沒有任何兼容問題！

CSS像藝術家一樣優雅，像工程師一樣嚴謹。

當選擇器，選擇上了某個元素的時候，那么要這么統計權重：

id的數量，類的數量，標簽的數量

如果權重一樣，那么以后出現的為準：

如果不能直接選中某個元素，通過繼承性影響的話，那么權重是0。

如果大家都是0，那么有一個就近原則：誰描述的近，聽誰的。

權重問題大總結：

1） 先看有沒有選中，如果選中了，那么以（id數，類數，標簽數）來計權重。誰大聽誰的。如果都一樣，聽后寫的為準。

2） 如果沒有選中，那么權重是0。如果大家都是0，就近原則。

 案例1：

案例2：

案例3：

案例4：

總結：

繼承性：好的事兒。繼承從上到下，哪些能？哪些不能？

層疊性：沖突，多個選擇器描述了同一個屬性，聽誰的？