小編給大家分享一下css選擇器的使用方法有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)天峻免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

1.選擇符(器)使用基本語法
選擇符｛    屬性1：屬性值1;
屬性2：屬性值2;
屬性3：屬性值3;
…..: …….;
}
2.標(biāo)記選擇器(直接使用HTML標(biāo)簽做選擇器)
second.html

    
    
    


    
 標(biāo)記選擇器(直接使用html標(biāo)簽做選擇器)

second.css

p{
    font-size:34px;   
    text-align:left;    
    text-transform:uppercase;    
    font-family:黑體,宋體;    
    text-indent:3em;    
    text-decoration:line-through;    
    font-weight:bolder;    
    letter-spacing:0.5em;    
    line-height:3px;    
    margin:34px;    
    padding:23px;
    }

3.類選擇器(為每一個標(biāo)簽設(shè)置一個類名，CSS可通過類名為標(biāo)簽設(shè)置樣式，不同標(biāo)簽類名可以相同，相同可以共用同一個樣式)-CSS中用標(biāo)簽名.類名或者.類名表示

second.html

    
    
    


     類選擇器(為每一個標(biāo)簽設(shè)置一個類名，CSS可通過類名為標(biāo)簽設(shè)置樣式，不同標(biāo)簽類名可以相同，
    相同可以共用同一個樣式)---CSS中用標(biāo)簽名.類名或者.類名表示    

second.css

.text{
    font-variant:small-caps;/*小型大寫字母*/
    font-family:宋體,黑體;    
    font-style:italic;    
    text-transform:lowercase;    
    font-size:35px;    
    text-indent:3em;    
    text-decoration:overline;    
    font-weight:bold;    
    letter-spacing: 1px;    
    line-height:3em;    
    font-variant:small-caps;    
    text-align:right;
    }

4.ID選擇器(為每一個HTML標(biāo)簽設(shè)置一個唯一的ID，CSS可以通過id來為標(biāo)簽設(shè)置樣式)
—-CSS中用#id值{ }來表示

second.html

    
    
    
    
    
     ID選擇器(為每一個HTML標(biāo)簽設(shè)置一個唯一的ID，CSS可以通過id來為標(biāo)簽設(shè)置樣式)
    ----CSS中用#id值{ }來表示    

    
    

second.css

.text{
    font-variant:small-caps;/*小型大寫字母*/
    font-family:宋體,黑體;    
    font-style:italic;    
    text-transform:lowercase;    
    font-size:35px;    
    text-indent:3em;    
    text-decoration:overline;
    }
#textp1{
    font-weight:bold;    
    letter-spacing: 1px;    
    line-height:3em;    
    font-variant:small-caps;    
    text-align:right;
    }

5.包含選擇器(后代選擇器：可跨代,跨標(biāo)簽)：在一個標(biāo)簽里包含另一個標(biāo)簽
second.html

    
    
    
    
    
      ID選擇器
        (為每一個html標(biāo)簽設(shè)置一個唯一的ID，CSS可以通過id來為標(biāo)簽設(shè)置樣式)
     ----CSS中用#id值{ }來表示    

     
     

second.css

p a{
    
    text-decoration:none;    
    font-size:25px;    
    background-color:pink;
    }
.text{
    font-size:21px;    
    font-style:normal;    
    text-transform:lowercase;    
    text-indent:3em;    
    font-weight:bold;    
    letter-spacing:0.7em;    
    line-height:27px;
    }

6.子選擇符（IE瀏覽器不支持）：中間不能包含其他標(biāo)簽；CSS中用 標(biāo)簽1 >標(biāo)簽2（子標(biāo)簽） 表示

second.html

    
    
    
    
    
     
             子選擇器
            （IE瀏覽器不支持）：中間不能包含其他標(biāo)簽；CSS中 標(biāo)簽1 >標(biāo)簽2（子標(biāo)簽） 表示 
    

    
    

second.css

p>a{
    text-decoration:none;    
    font-family:黑體，宋體;
    }
p{    
font-size: 23px;
}

7.相鄰選擇器:(CSS樣式作用在最后一個標(biāo)簽)常用設(shè)置表格的列屬性–CSS用標(biāo)簽1+….標(biāo)簽n表示

second.html

    
    
    
    
    
     
            子選擇器:
            （IE瀏覽器不支持）：中間不能包含其他標(biāo)簽；CSS中 標(biāo)簽1 >標(biāo)簽2（子標(biāo)簽） 表示 
    


    
        相鄰選擇器(CSS樣式作用在最后一個標(biāo)簽)常用設(shè)置表格的列屬性--CSS用標(biāo)簽1+....標(biāo)簽n表示    

        
        

second.css

.text+.text1{
    color:pink;    
    background-color:gray;    
    font-size:34px;
    }

8.并集選擇器:多個標(biāo)簽一起設(shè)置樣式，用逗號隔開

second.css

    
    
    
    
    
     
            子選擇器:
            （IE瀏覽器不支持）：中間不能包含其他標(biāo)簽；CSS中 標(biāo)簽1 >標(biāo)簽2（子標(biāo)簽） 表示 
    


    
        并集選擇器:多個標(biāo)簽一起設(shè)置樣式，用逗號隔開    

        
        

second.css

.text,.text1{
    color:pink;
    background-color:gray;    
    font-size:34px;}

9.偽類(元素某一種狀態(tài)，常用于描述超鏈接的狀態(tài)：link(未訪問狀態(tài)); visited(已經(jīng)訪問過的狀態(tài));hover(鼠標(biāo)經(jīng)過狀態(tài));active(正在單擊狀態(tài))CSS用標(biāo)簽名：狀態(tài)表示

second.html

    
    
    
    
    
    偽類
    
    

second.css

a:link {
    color:blue;    
    font-size:53px;    
    text-decoration: none;
    }
a:visited {
    color:red;    
    font-size:193px;
    }
a:hover  {
    color:green;    
    font-size:73px;
    }
a:active  {
    color:gray;    
    font-size:183px;
    }

10.偽元素(某個對象中某個元素的狀態(tài))CSS中用標(biāo)簽名：偽類表示
常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])
second.html

    
    
    
    
    
    
偽元素(某個對象中某個元素的狀態(tài))CSS中用標(biāo)簽名：
 偽元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])  
 
偽元素(某個對象中某個元素的狀態(tài))CSS中用標(biāo)簽名：
 偽元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])    
 
 

second.css

p:first-letter{
    font-size:200%;
    }
p:first-line{
    color:red;
    }

11樣式優(yōu)先級：內(nèi)聯(lián)選擇器>ID選擇器>類選擇器（偽類，屬性）>標(biāo)記選擇器
可以用!important;加大優(yōu)先級

以上是“css選擇器的使用方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！