1. 程式人生 > >html標籤選擇器的使用選擇(學習小記)

html標籤選擇器的使用選擇(學習小記)

         CSS選擇器包括:標記選擇器,類別選擇器(.class),ID選擇器(#id)三種。

1.標籤選擇器:如:p td tr h1 h2 span a

標籤選擇器,是所有帶有某種標籤的都生效。這裡以p為例,也就是所有的帶有p標記的都會這樣的樣式

CSS程式碼:
  p{color:red;}
HTML程式碼:
<p>我是標籤小紅</p>
2.類別選擇器:如:#main #sidebar #footer #header

注意id選擇器是唯一的,因為只有id="yy"的才有這種樣式,而一個頁面裡元素的Id必須是唯一的,id選擇器以#開頭用法是:id=""

CSS程式碼:
#testid{color:red;} HTML程式碼: <div id="testid">我是ID小紅</div>
3.id 選擇器:如:.post .content .widget

類選擇器以.開頭    只要把元素的class="" 就能表現為這種樣式了用法是:class=""

CSS程式碼:
  #testid{color:red;}
HTML程式碼:
<div id="testid">我是ID小紅</div>
4.各選擇器的使用選擇

在實際使用中,單一的元素或需要程式、JS控制的東西,需要用id定義;重複使用的元素、類別,用class定義。

--確定使用類選擇符還是ID選擇符的一般規則

  (1)對於網頁結構問題,應該使用ID選擇符

  (2)對於重複出現的樣式,可以使用類選擇符

  (3)當ID選擇符和類選擇符衝突時,ID選擇符的優先順序大於類選擇符

  (4)也可以為ID選擇符指定標籤範圍,這樣可以提高樣式的優先順序。


上面三種選擇器都作用與同一個標籤的話,因為標籤選擇器範圍最大,然後是class選擇器次之, id選擇器最小,所以,以作用範圍小的為準!!!