1. 程式人生 > >CSS 基本選擇器&優先順序

CSS 基本選擇器&優先順序

選擇器

  選擇器就是指定css要作用的標籤,呢麼標籤的名字就是選擇器。意為:選擇哪個容器。
選擇器一共有3種:

a) html 標籤名選擇器。使用html的標籤名。
b) class 選擇器。其實使用的標籤中的 class 屬性。
c) id 選擇器。其實使用的是標籤中的 id 屬性。

  每一個標籤都定義了 class 屬性和 id 屬性。用於對標籤進行標識,方便對標籤進行操作。在定義中,多個標籤的class屬性可以相同,而 id 值要唯一,因為 JavaScript 中經常用。

class選擇器

  在標籤中定義 class 屬性並賦值。通過 標籤名 .class 值 對該標籤進行要是設定。
  相同標籤設定不同的樣式的時候,用 class 進行區分。

p.class_1 { color:#FF0000; }
p.class_2 { color:#0000FF; }

  不同的標籤相同的設定的時候,用 class 進行統一定義。
  

.classname { color:#00FF00; }
<p class="classname">P標籤樣式</p>
<div class="classname">DIV標籤樣式</div> 

id選擇器

  與 class 選擇器類似,但是格式不同,選擇器的名稱為: #id值

#pid { color:#0000FF; }
<p id="pid">
P標籤樣式</p>

  多個標籤同樣可以定義相同的 id 值,但是對於 JavaScript 對標籤元素的獲取就會出錯。所以形成習慣,確保id值的唯一性對於以偶的資料庫設計也很有好處。

選擇器優先順序

標籤選擇器 < 類選擇器 < id選擇器 < style屬性


這裡寫圖片描述