html/css選擇器的基本使用
阿新 • • 發佈：2018-12-25
1.標籤選擇器
html中的標籤如：<html><body><h1><p><img>等等
<p>{font-size:12px;line-height:1.6em;color:red}
2.類選擇器
.類選擇器名{css樣式;}
用合適的標籤把要修飾的內容標記起來如<span>標籤
如：
<span class="類名">要修飾的內容</span>
.類名{color:red;}
3.id選擇器
#id{
color:green;
}
<span id="id">內容</span>
xx:類選擇器和id選擇器的區別
都可以應用於任何元素
不同點：
1.id選擇器怎能在文件中使用一次。在一個HTML文件中id選擇器只能使用一次，類選擇器可以多次使用
2.類選擇器可以使用列表方法為一個元素同事設定多個樣式但是id選擇器不可以使用列表方法
<span class="類1 類2">三年級</span>
4.子選擇器
.name>li{border:1px solid red;}
用於指定標籤元素的第一代子元素
滑鼠滑過的狀態來設定字型顏色
5.包含選擇器
即加入空格，用於選擇指定標籤元素下的後輩元素如：
.first span{color:red};
包含選擇器將作用於所有子後代元素，用空格，而子選擇器則是用>進行選擇
6.通用選擇器
功能最強的的選擇器，它使用(*)指定，它的作用是匹配HTML中所有標籤元素
7.偽類選擇器
它允許給html不存在的標籤（標籤的某種狀態）設定樣式如：
a:hover{color:red;}//為a標籤滑鼠滑過狀態設定字型顏色變紅。
<a href="http://www.baidu.com">百度</a>滑過百度時。。。
8.分組選擇符
不同標籤元素設定相同的一個樣式時
如：h1,span{color:red}這樣h1和span就都設定了color=red的樣式了
html中的標籤如：<html><body><h1><p><img>等等
<p>{font-size:12px;line-height:1.6em;color:red}
2.類選擇器
.類選擇器名{css樣式;}
用合適的標籤把要修飾的內容標記起來如<span>標籤
如：
<span class="類名">要修飾的內容</span>
.類名{color:red;}
3.id選擇器
#id{
color:green;
}
<span id="id">內容</span>
xx:類選擇器和id選擇器的區別
都可以應用於任何元素
不同點：
1.id選擇器怎能在文件中使用一次。在一個HTML文件中id選擇器只能使用一次，類選擇器可以多次使用
2.類選擇器可以使用列表方法為一個元素同事設定多個樣式但是id選擇器不可以使用列表方法
<span class="類1 類2">三年級</span>
4.子選擇器
.name>li{border:1px solid red;}
用於指定標籤元素的第一代子元素
滑鼠滑過的狀態來設定字型顏色
5.包含選擇器
即加入空格，用於選擇指定標籤元素下的後輩元素如：
.first span{color:red};
包含選擇器將作用於所有子後代元素，用空格，而子選擇器則是用>進行選擇
6.通用選擇器
功能最強的的選擇器，它使用(*)指定，它的作用是匹配HTML中所有標籤元素
7.偽類選擇器
它允許給html不存在的標籤（標籤的某種狀態）設定樣式如：
a:hover{color:red;}//為a標籤滑鼠滑過狀態設定字型顏色變紅。
<a href="http://www.baidu.com">百度</a>滑過百度時。。。
8.分組選擇符
不同標籤元素設定相同的一個樣式時
如：h1,span{color:red}這樣h1和span就都設定了color=red的樣式了