首頁 > 開發者 > JavaScript
CSS那些事兒-閱讀隨筆2（選擇符的組合與優先順序/權重），css隨筆
在知道了CSS選擇符最基礎的知識後，就要綜合利用它們了。這裡就記錄幾種常見的用法。
1.針對性的使用類選擇符或者ID選擇符
類選擇符在一個頁面中可能會在不同的地方應用，那麼就需要有針對性地使用類選擇符。如下例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .myContent{ 8 font-size: 12px; 9 color: #00f;10 }11 p.myContent{12 font-size: 25px;13 line-height: 5px;14 text-decoration:underline;15 font-weight:bold;16 color: #f00;17 }18 </style>19 </head>20 <body>21 <div class="myContent">css很強大，可以控制頁面任何元素的樣式</div>22 <p class="myContent">1與世界同步，做一個成功的頁面仔</p>23 <span class="myContent">2讓我們看看css多麼奇妙吧</span>24 </body>25 </html>View Code該例子在style中定義了一個.myContent的css類和組合選擇符 p.myContent（注意p和.myContent沒有空格），且頁面中的div、p和span元素也都引用了myContent類，但是由於存在p.myContent，所以div和span的文字會是藍色，而p中的文字會是紅色，如下圖所示：
在此種應用下，ID選擇符和類選擇符相似，只需將.換成#即可（p#myId），如下例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .myContent{ 8 font-size: 12px; 9 color: #00f;10 }11 p#myId{12 font-size: 25px;13 line-height: 5px;14 text-decoration:underline;15 font-weight:bold;16 color: #f00;17 }18 </style>19 </head>20 <body>21 <!--<p>css很強大，<span>可以控制頁面<strong>任何元素</strong>的樣式</span><strong>dfd</strong></p>-->22 <div class="myContent">css很強大，可以控制頁面任何元素的樣式</div>23 <p id="myId">1與世界同步，做一個成功的頁面仔</p>24 <span class="myContent">2讓我們看看css多麼奇妙吧</span>25 </body>26 </html>View Code運行結果和一樣。
2.選擇符群組
即將多個相同定義的選擇符合并，如下例中將p，類選擇符.myContent以及id選擇符#myId共同定義成紅色、加粗、帶底線、字型大小為25px的文字 p,.myContent,#myId {property:value;}，注意它們之間使用逗號隔開的。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 p,.myContent,#myId{ 8 font-size: 25px; 9 text-decoration:underline;10 font-weight:bold;11 color: #f00;12 }13 </style>14 </head>15 <body>16 <!--<p>css很強大，<span>可以控制頁面<strong>任何元素</strong>的樣式</span><strong>dfd</strong></p>-->17 <div class="myContent">css很強大，可以控制頁面任何元素的樣式</div>18 <p>1與世界同步，做一個成功的頁面仔</p>19 <span id="myId">2讓我們看看css多麼奇妙吧</span>20 </body>21 </html>View Code運行結果如
3.CSS的優先順序
多重樣式（Multiple Styles）：如果外部樣式、內部樣式和內聯樣式同時應用於同一個元素，就是使多重樣式的情況。一般情況下，此時的優先順序如下：
標有!important樣式>內嵌樣式 （HTML元素中的style）> 內部樣式表 （head中的style）> 外聯樣式表（head中外部引入的）>瀏覽器預設樣式
例如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 p,.myContent,#myId{ 8 font-size: 25px; 9 text-decoration:underline;10 font-weight:bold;11 color: #f00;12 }13 </style>14 </head>15 <body>16 <div class="myContent">css很強大，可以控制頁面任何元素的樣式</div>17 <p style="color: blue">1與世界同步，做一個成功的頁面仔</p>18 <span id="myId">2讓我們看看css多麼奇妙吧</span>19 </body>20 </html>View Code雖然在head的style中設定了p標籤內的文字樣式顏色為紅色，但是在HTML的p元素中又通過style屬性對其顏色進行了設定（藍色）。因為內嵌樣式優先順序高於內部樣式表，所以p標籤中的文字最終表現為藍色，如所示。
4.CSS的權重
為了在多個樣式修飾同一元素時，更準確的判斷到底利用哪個CSS，可以使用權重加權的方法，即為每類選擇符賦予權重，然後計算出現的選擇符組合的加權權重，最終得出的積分最高的就為最終的樣式。
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 p { 8 color:blue; 9 }10 /*p * {color: red;}*/11 p.myColor{12 color: black;13 }14 .myColor{15 color: yellow;16 }17 #myId{18 color: green;19 }20 </style>21 </head>22 <body>23 <p>Hello</p>24 <p class="myColor">css很強大，可以控制頁面任何元素的樣式</p>25 <p class="myColor" id="myId">1與世界同步，做一p st頁面仔</p>26 <p style="color: red" class="myColor">2讓我們看看css多麼奇妙吧</p>27 </body>28 </html>View Code分析：代碼中，各個選擇符的權重加權後所得的積分如下
p=1
p.myColor=1+10=11
.myColor=10
#myId=100
style="color: red"=10001 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .myColor1{ 8 color: red; 9 }10 .myColor2{11 color: blue;12 }13 </style>14 </head>15 <body>16 <p class="myColor1 myColor2">css很強大，可以控制頁面任何元素的樣式</p>17 <p class="myColor2 myColor1">1與世界同步，做一個頁面仔</p>18 <p>2讓我們看看css多麼奇妙吧</p>19 </body>20 </html>View Code
所以，“Hello”為藍色（p=1）；“css很強大，可以控制頁面任何元素的樣式”為黑色（p.myColor=1+10=11）；“1與世界同步，做一p st頁面仔”為綠色（#myId=100）；“2讓我們看看css多麼奇妙吧”為紅色（style="color: red"=1000），如所示。
5.css引入順序的影響
在head中的style中定義樣式（.myColor1和.myColor2）的順序以及在HTML元素p中引用這些類時的順序會產生怎樣的影響呢？我們做個實驗。
a.首先在head的style中首定義.myColor1，再定義.myColor2；然後在p中分別引入兩個類，但順序不同<p class="myColor1 myColor2">css很強大，可以控制頁面任何元素的樣式</p><p class="myColor2 myColor1">1與世界同步，做一個頁面仔</p>，代碼如下：
運行結果如：
b.首先在head的style中首定義.myColor2，再定義.myColor1；然後在p中分別引入兩個類，但順序不同<p class="myColor1 myColor2">css很強大，可以控制頁面任何元素的樣式</p><p class="myColor2 myColor1">1與世界同步，做一個頁面仔</p>，代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .myColor2{ 8 color: blue; 9 }10 .myColor1{11 color: red;12 }13 </style>14 </head>15 <body>16 <!--<p>css很強大，<span>可以控制頁面<strong>任何元素</strong>的樣式</span><strong>dfd</strong></p>-->17 <p class="myColor1 myColor2">css很強大，可以控制頁面任何元素的樣式</p>18 <p class="myColor2 myColor1">1與世界同步，做一個頁面仔</p>19 <p>2讓我們看看css多麼奇妙吧</p>20 </body>21 </html>View Code運行結果如：
通過上述兩組實驗可以看出，css只與定義的順序有關係，而與在元素中引用的順序並沒有關係，並且後定義的樣式會覆蓋之前定義的樣式，其實這也是css為什麼叫做樣式層疊表。
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
