[html5入門-2]html5選擇器之標籤選擇器，id選擇器和類選擇器
阿新 • • 發佈：2018-12-26
標籤選擇器，id選擇器和類選擇器為html5三種常用的選擇器
可見，內嵌樣式優先順序最高。
刪除內嵌樣式後，程式碼如下：
可見class選擇器的優先順序排第三，因此標籤選擇器的優先順序最低。
總結，當樣式衝突時，選擇器樣式優先順序如下：
內嵌樣式>id選擇器>class選擇器>標籤名
另外，id選擇器權重:100，class選擇器權重:10，標籤選擇器的權重最小。
一.標籤選擇器
語法：
標籤名{
css樣式1；
css樣式2；
......
}
舉例說明，使用標籤選擇器建立分別建立一個div標籤和一個p標籤，程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>標籤選擇器</title> <style type="text/css"> /*type="text/css" 指定type樣式的型別為CSS樣式*/ div{ width:200px; height:100px; background: blue; } p{ width:200px; height:100px; background: red; } </style> </head> <body> <div>我是div標籤</div> <p>我是p標籤</p> </body> </html>
說明，內部樣式修改即通過標籤選擇器來實現的。
程式碼效果如下：
二.id選擇器
語法：1.首先在標籤標籤中設定一個id屬性，2.在head標籤中寫一個style標籤，3.在style標籤中寫選擇器；
#id名稱{
css樣式1；
css樣式2；
......
}
舉例說明，利用Id選擇器建立一個p標籤，程式碼如下：
說明，使用id選擇器也可以建立div等標籤，僅以建立p標籤為例；<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>選擇器</title> <style type="text/css"> #p1{ width:300px; height:100px; background: greenyellow; } </style> </head> <body> <p id="p1">我是p標籤</p> </body> </html>
注意：id選擇器以#開頭，且一個標籤有且只有一個id。
程式碼效果如下：
三.類選擇器
語法：1.首先在標籤中設定一個class屬性，2.在head標籤裡面新增一個style標籤，3.在style標籤裡面寫具體的類選擇器。
.類名{
css樣式1;
css樣式2;
......
}
舉例說明，利用類選擇器建立兩個class標籤，程式碼如下：
</body></html> 說明：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>選擇器</title> <style type="text/css"> .wh{ width:100px; } .bg{ background:blueviolet ; } .animal{ width:100px; height:200px; background: blue; } .fruit{ width:200px; height:100px; background: green; } </style> </head> <body> <div class="wh bg">我是div標籤</div><hr/> <div class="fruit">蘋果</div><hr/> <pre name="code" class="html"> <div class="animal">貓</div>
<div class="wh bg">我是div標籤</div>表示同一個class類下面可以包含多個選擇器，這些選擇器共同決定了該塊標籤的屬性。
以上程式碼效果如下：
<img src="https://img-blog.csdn.net/20160920222212459" alt="" />
四.選擇器之間的優先順序比較
內嵌樣式、id選擇器、class選擇器以及標籤選擇器同時出現時，哪個選擇器的優先順序較高呢？下面以程式碼形式說明
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>優先順序</title>
<style>
#id1{
width:200px;
height:100px;
background:black ;
}
.class1{
width:300px;
height:100px;
background:blue ;
}
div{
width:200px;
height:100px;
background:green ;
}
</style>
</head>
<body>
<div id="id1" class="class1" style="background: brown;">我是div</div>
</body>
</html>可見，內嵌樣式優先順序最高。
刪除內嵌樣式後，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>優先順序</title>
<style>
#id1{
width:200px;
height:100px;
background:black ;
}
.class1{
width:300px;
height:100px;
background:blue ;
}
div{
width:200px;
height:100px;
background:green ;
}
</style>
</head>
<body>
<div id="id1" class="class1">我是div</div>
</body>
</html>
執行結果如下：
<img src="https://img-blog.csdn.net/20160920222934448" alt="" />
可以看出id選擇器的優先順序次之。
刪除id選擇器程式碼如下：
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>優先順序</title>
<style>
.class1{
width:300px;
height:100px;
background:blue ;
}
div{
width:200px;
height:100px;
background:green ;
}
</style>
</head>
<body>
<div class="class1">我是div</div>
</body>
</html>可見class選擇器的優先順序排第三，因此標籤選擇器的優先順序最低。
總結，當樣式衝突時，選擇器樣式優先順序如下：
內嵌樣式>id選擇器>class選擇器>標籤名
另外，id選擇器權重:100，class選擇器權重:10，標籤選擇器的權重最小。