欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

四種CSS常用的選擇器使用方法和注意事項(xiàng)

  發(fā)布時(shí)間：2016-05-03 15:53:19   作者：佚名   我要評(píng)論
這篇文章主要介紹了四種CSS常用的選擇器使用方法和注意事項(xiàng)，為大家介紹了CSS選擇器的優(yōu)先級(jí)，感興趣的小伙伴們可以參考一下

本文為大家分享了CSS中常用的四種選擇器，供大家參考，具體內(nèi)容如下

1、類選擇器（class選擇器）

基本使用：

      .類選擇器{

            屬性名: 屬性值;

            ...

      }

案例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*類選擇器*/     
  2. .s1{     
  3.     background-color: pink;     
  4.     font-weight: bold;     
  5.     font-size: 16px;     
  6.     color: black;     
  7. }     
  8.   

2、id選擇器

基本使用：

      #id選擇器{

             屬性名: 屬性值;

             ...

      }

案例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*id選擇器的使用*/     
  2. #id1{     
  3.     background-color: silver;     
  4.     font-size: 40px;     
  5. }     

3、html元素選擇器

      某個(gè)html元素{

             屬性名: 屬性值;

             ...

      }

 案例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. a:link{     
  2.     color: black;     
  3.     text-decoration: none;     
  4.     font-size: 24px;     
  5. }     
  6. a:visited{     
  7.     color: red;     
  8. }     
  9. a:hover{     
  10.     color: green;     
  11.     text-decoration: underline;     
  12.     font-size: 40px;     
  13. }     
  14.      
  15. /*對(duì)同一種html元素分類*/     
  16. p.cls1{     
  17.     color:blue;     
  18.     font-size:30px;     
  19. }     
  20. p.cls2{     
  21.     color:red;     
  22.     font-size:20px;     
  23. }     
  24.   

a 元素的效果為：

（1）默認(rèn)樣式是黑色，24px，沒有下劃線；

（2）當(dāng)鼠標(biāo)移動(dòng)到超鏈接時(shí)，自動(dòng)出現(xiàn)下劃線；

（3）點(diǎn)擊后，超鏈接變成紅色。

p 元素的選擇器在html中的使用，如：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <p class="cls1">hello,world!hello,world!hello,world!</p>     
  2. <p class="cls2">hello,html!hello,html!hello,html!</p>   

 4、通配符選擇器

該選擇器可以用到所有的html元素，但是其優(yōu)先權(quán)最低

      *{

            屬性名: 屬性值;

            ...

      }

案例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*通配符選擇器*/     
  2. *{     
  3.     /*margin-top:0px;   
  4.     margin-left:0px;*/     
  5.     /*margin: 10px 30px 40px 1px;*/     
  6.     /*margin 可以寫一個(gè)值，（上右下左（順時(shí)針））如果是兩個(gè)值（上下，左右）   
  7.     如果是是三個(gè)值（上，左右，下）*/     
  8.     margin:0px;     
  9.     padding:0px;     
  10. }     
  11.   

四個(gè)選擇器的優(yōu)先權(quán)如下：

Id選擇器 > class選擇器 > html選擇器 > 通配符選擇器

選擇器的細(xì)節(jié)問題?。?！

1、父子選擇器的使用

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*父子選擇器*/     
  2. /*對(duì)id選擇器為#id1下的span元素定義樣式*/     
  3. #id1 span{     
  4.     color: red;     
  5.     font-style:italic;     
  6. }     
  7. /*對(duì)id選擇器為#id1下的span元素下的span元素定義樣式*/     
  8. #id1 span span{     
  9.     color:green;     
  10. }     
  11. #id1 span span a{     
  12.     color:blue;     
  13. }    

通過上面總結(jié)：

（1）父子選擇器可以有多級(jí)（但是在實(shí)際開發(fā)中，建議不要超過三層）；

（2）父子選擇器有嚴(yán)格的層級(jí)關(guān)系；

（3）父子選擇器不局限于什么類型選擇器，比如

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #id span span   
  2.   
  3. s1 #id span   
  4.   
  5. div #id s2   
  6.   

2、一個(gè)元素可以同時(shí)有id選擇器和類選擇器（但是id選擇器不可以有多個(gè)）

案例：

<span class="s1" id="tid">TestId</span> 

3、一個(gè)元素最多有一個(gè)id選擇器，但是可以有多個(gè)類選擇器

使用方法如下：

<元素 class=”類選擇器1 類選擇器2”>內(nèi)容</元素>

案例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*類選擇器1*/     
  2. .s1{     
  3.     background-color: pink;     
  4.     font-weight: bold;     
  5.     font-size: 16px;     
  6.     color: black;     
  7. }     
  8. /*再配置一個(gè)類選擇器2*/     
  9. .cls1{     
  10.     font-style:italic;     
  11.     text-decoration:underline;     
  12. }    

（注：這里需要注意的是，當(dāng)同時(shí)使用多個(gè)類選擇器且類選擇器中的樣式發(fā)生沖突時(shí)，以CSS文件中最尾的類選擇器的樣式為準(zhǔn)，不依賴于html文件中的類選擇器的放置順序。）


4、我們可以把某個(gè)CSS文件中的選擇器共有的部分，獨(dú)立出來寫成一份。比如：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*招生廣告*/     
  2. .ad_stu{     
  3.     width:136px;     
  4.     height:196px;     
  5.     background-color:#FC7E8C;     
  6.     margin:5px 0 0 6px;     
  7.     float:left;     
  8. }     
  9.      
  10. /*廣告2*/     
  11. .ad_2{     
  12.     background:#7CF574;     
  13.     height:196px;     
  14.     width:457px;     
  15.     float:left;     
  16.     margin:5px 0 0 6px;     
  17. }     
  18.      
  19. /*房地產(chǎn)廣告*/     
  20. .ad_house{     
  21.     background:#7CF574;     
  22.     height:196px;     
  23.     width:152px;     
  24.     float:left;     
  25.     margin:5px 0 0 6px;     
  26. }     
  27. //上面的CSS可以寫成   
  28.   
CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*招生廣告*/     
  2. .ad_stu{     
  3.     width:136px;     
  4.     background-color:#FC7E8C;     
  5. }     
  6.      
  7. /*廣告2*/     
  8. .ad_2{     
  9.     background:#7CF574;     
  10.     height:196px;     
  11.     width:457px;     
  12. }     
  13.      
  14. /*房地產(chǎn)廣告*/     
  15. .ad_house{     
  16.     background:#7CF574;     
  17.     height:196px;     
  18.     width:152px;     
  19. }     
  20.      
  21. .ad_stu, .ad_2, .ad_house{     
  22.     height:196px;     
  23.     margin:5px 0 0 6px;     
  24.     float:left;     
  25. }    

5、CSS文件本身也會(huì)被瀏覽器從服務(wù)器下載到本地，才能顯示效果。

以上就是四種CSS常用的選擇器使用方法和注意事項(xiàng)，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論