HTML選擇器
HTML選擇器
1、標簽選擇器
直接將HTML元素中的標簽作為選擇器，可以是p、h1、d1、strong等HTML標簽，在CSS中直接展現。
2、ID選擇器
通常在編寫頁面的時候設定某些標簽元素的ID,同一個HTML中ID不允許重復，例如，<div id="wrapper">,后來使用的時候就用#wrapper，這里的”#wrapper“就是ID選擇器，在CSS中以”#“開頭。
3、類選擇器
CSS里面用”.“開頭的表示類選擇器，如有如下的CSS代碼
.error{
color
:
red
;
font-size
:
14px
;
}
|
在頁面HTML的代碼中，使用class="類別名"進行調用
<span class="error">錯誤信息以紅色顯示</span>
注意：類選擇器和ID選擇器比較類似，都是通過HTML元素添加屬性而生效的，可應用在<body>內的任何元素上，不過和ID選擇器不同的是，類選擇器是可以重復的。例如可以像下面的代碼這樣設定：
<div class="error">用戶名不存在！</div> <p class="error">郵箱格式不正確！</p>
也可以針對不同類型的元素對同一個名稱的類選擇器設定不同的樣式規則，即使是相同名稱的類選擇器，也可以有不同的表現。例如，對於上面的HTML代碼，可以修改CSS規則如下：
div.error{ color:red; font-size:14px; } p.error{ color:green; font-size:14px; }
4、后代選擇器
<h3>外部</h3> <div id="sider"> <h3>內部</h3> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> </div>
在這里，可以定義如下的CSS樣式，就可以實現分層調用
h3 {color:green;} #sider h3 {color:red;} #sider ul {color:red;} #sider ul li{color:red;}
5、子元素選擇器
CSS樣式設定如下：
div > em {color:red;}
HTML代碼如下：
<div> <em>這個em是div中的元素</em> <p>p中的<em>是p的子元素</p> </div>
顯示效果為第一個<em>標簽顯示紅色，而第二個<em>標簽的子元素將不會應用此樣式。
6、相鄰兄弟選擇器
表示樣式應用於與該元素相鄰的下一個元素
div +p{color:red;}
HTML代碼如下：
<p>與div相鄰的上一個p</p> <div> <p>div中的p</p> </div> <p>與div相鄰的下一個p</p> <p>不與div相鄰的p</p>
只有與div相鄰的下一個p才會應用此樣式