標籤：樣式 樣式選取器 css tag
上面的思維導圖已經大致將這六種選取器的重要點描述出來了，下面用代碼再一一實驗一次。
1.HTML選取器（標籤選取器）
將需要定義樣式的元素作為選擇符，在<style>標籤中進行樣式的定義。
<html><head><title>HTML選取器</title><style>p{color:red;font-size:1cm;}b{color:green;font-size:50px;}</style></head><body><p>aaaaaaaaa</p><b>bbbbbbbb</b></body></html>
2.類別選取器
（1）同一個元素使用不同的樣式
<html><head><title>類別選取器</title><style>p{color:yellow;}p.cls1{color:red;}p.cls2{color:green;}p.cls3{color:blue;}</style></head><body><p>aaaaaaaaaa</p><p class="cls1">aaaaaaaaaa</p><p class="cls2">aaaaaaaaaa</p><p class="cls3">aaaaaaaaaa</p></body></html>
（2）去掉[tag],使選取器適用所有元素，同意一個元素可以在單個標籤中同時使用多個選取器
<html><head><title>類別選取器</title><style>p{color:yellow;}.cls1{color:red;}.cls2{font-size:1cm;border:2px solid green;}.cls3{color:blue;}</style></head><body><p>aaaaaaaaaa</p><p class="cls1 cls2">aaaaaaaaaa</p><a href="http://www.baidu.com" class="cls2">baidu</a><br><b class="cls3">aaaaaaaaaa</b></body></html>
3.ID選取器（一定要注意每個ID屬性值在html都是唯一存在的）
<html><head><title>ID選取器</title><style>#first{color:yellow;}#second{color:red;}#third{font-size:1cm;border:2px solid green;}#forth{color:blue;}</style></head><body><p id="first">aaaaaaaaaa</p><p id="second">aaaaaaaaaa</p><a href="http://www.baidu.com" id="third">baidu</a><br><b id="forth">aaaaaaaaaa</b></body></html>
4.關聯選取器
<html><head><title>關聯選取器</title><style>div #first .two p{color:red;font-size:2cm;}</style></head><body><div><div id="first"><div ><div class="two"><p>aaaaaaaaaaaa</p></div></div></div></div></body></html>
因為這裡涉及到了標籤之間的嵌套關係，所以簡單提一下樣式的繼承：
所有嵌套在某個HTML標籤中的HTML標籤都會繼承外層標籤設定的樣式。
實驗代碼：
<html><head><title>樣式繼承</title><style>#first{color:red;font-size:2cm;background-color:green;}</style></head><body><div id="first"><div><p>aaaaaaaaa</p></div></div></body></html>
5.組合選取器（選擇符之間用逗號隔開，別和關聯選取器弄混了）
<html><head><title>關聯選取器</title><style>#first,.one,h1,p{color:red;font-size:1cm;background-color:green;}</style></head><body><p>aaaaaaaaa</p><h1>aaaaaaaa<h1><u id="first">aaaaaaaaa</u><br><em class="one">aaaaaaaa</em></body></html>
6.虛擬元素選取器
<html><head><title>組合樣式選取器</title><style>a:link{color:green;font-size:1cm;}a:hover{color:red;font-size:2cm;}a:visited{yellow:red;font-size:1cm;}p:first-letter{color:red;font-size:3cm;}p:first-line{color:yellow;font-size:20px;}</style></head><body><a href="http://www.baidu.com">baidu</a><br><a href="http://www.hao123.com">hao123</a><br><a href="http://www.csdn.net">csdn</a><p>aaaaaaaaaaaa<br>bbbbbbbbbb<br>cccccccccc</p></body></html>
這是滑鼠沒有放上去的時候，滑鼠放上去後，連結會發生變化，如：
其他的就不多示範了。基本上這些選取器的用法都用代碼過一遍了，剩下的就是靠我們活學活用。可不是簡單的來個標籤看看效果了，所以大家共勉吧。
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
