1 : css萬用字元選取器
萬用字元選取器用星號(*)來表示,例如:
*{ font-size : 12px;}
表示所有的元素的字型大小都是12px；
2 : css分組選取器
當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔。例如：
p, li {line-height:20px;color:#c00;}#main p, #sider span {color:#000;line-height:26px;}
使用分組選取器，將會大大的簡化CSS代碼，將具有多個相同屬性的元素，合并分組進行選擇，定義同樣的CSS屬性，這大大的提高了編碼效率，同時也減少了CSS檔案的體積。
3 : css標籤選取器
一個完整的HTML頁面是有很多不同的標籤組成，而 標籤選取器，則是決定哪些標籤採用相應的CSS樣式,例如:
p{ color: red; }
這段代碼會讓所有的p標籤都變成紅色
4 : css類別選取器
類別選取器以class屬性中有指定類名的任何元素為目標,類別選取器以一個"."符號開頭例如:
.info { color:black; }
這樣會讓所有類名為info的類的元素顏色都變為黑色
5 :css ID選取器
識別碼選取器可以為標有特定 ID 的 HTML 元素指定特定的樣式;ID選擇符以一個“#”符號開頭。例如:
#demop{ color:#000;}
這裡代表id為demop的元素的設定它的字型顏色為黑色。
6 : css偽類別選取器
有時候還會需要用文檔以外的其他條件來應用元素的樣式，比如滑鼠移至上方等。這時候我們就需要用到偽類了。以下是連結應用的偽類定義。例如:
a:link{ color:green ; font-size: 50px}a:hover{ color:pink; font-size: 50px}a:active{ color:yellow; font-size: 50px}a:visited{ color:red; font-size: 50px}
效果:
開啟網頁時標籤為綠色
將滑鼠放在標籤上時標籤為粉色
點擊標籤是標籤為黃色
點擊後標籤為紅色.
7 : css後代選取器
後代選取器用來選擇特定元素或元素組的後代，將對父元素的選擇放在前面，對子項目的選擇放在後面，中間加一個空格分開。後代選取器中的元素不僅僅只能有兩個，對於多層祖先後代關係，可以有多個空格加以分開，如id為a、b、c的三個元素，則後代選取器可以寫成#a #b #c{}的形式，只要對祖先元素的選擇在後代元素之前、中間以空格分開即可。例如:
#people em{ color: red; }
這一規則把ID值為“people”的元素中包含任何em元素的顏色設定為紅色。
8 : css組合選取器
可以把兩種或者多種類型的選擇符組合式使用;例如:
p.info { color:blue; }
它只選擇屬於info類的段落，屬於該類的別種元素和不屬於info類的其他段落將被忽略。
9 : css屬性選取器
格式：基本選取器[屬性 = ‘屬性值’]{ },也可以唯寫屬性,例如:
<head><meta charset="UTF-8"><title>屬性選取器</title><style type="text/css"> input[type = 'text'] {background-color: red} input[type = 'password'] {background-color: pink}</style></head><body> <form> name:<input type = "text"><br/> pass:<input type = "password"> </form></body></html>
運行結果：
css選取器優先順序大小:
!important > 行間樣式>ID選取器 > 類|屬性 選取器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性
當有一些複雜選取器不能通過優先順序的大小比出,那麼我們就要用到權重進行計算
css選取器權重計算:
| !important |
無窮大 |
| 行間樣式 | 1000 |
| ID選取器 | 100 |
| 類|屬性|偽類 選取器 |
10 |
標籤選取器 萬用字元選取器 |
1 0 |
將每一行上的所有選取器轉化為這些數值進行相加得的結果越大則優先順序越高!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
