標(biāo)簽選擇器
例如：`p`、`a`、`h[1,6]`、`span`、`div`、、、
類選擇器(class)
class 選擇器以 "." 來定義。 如：.id1{樣式屬性：值;}
命名盡量別用下劃線，會出現(xiàn)兼容問題，下劃線一般用于JS里，也不要用純數(shù)字或者中文名
例如：
<div class="class1"></div>
注意：
類選擇器還包括多類名選擇器 <div class="class1 class2.."></div>
ID選擇器
id 選擇器以 "#" 來定義。 如：#id1{樣式屬性：值;}
命名方式如類選擇器
例如：
<div id="id1"></div>
類選擇器和ID選擇器的區(qū)別
二者的主要區(qū)別在哪里呢？（使用次數(shù)）
id只能用來定義單一元素，定義二個以后。頁面不會出現(xiàn)什么問題，但是W3檢測的時候認(rèn)為你頁面不符合標(biāo)準(zhǔn)；
class是類，同一個class可以定義多個元素。就頁面效果而言，兩個東西的視覺效果幾乎無差別。
id 選擇符為什么要少用，它有有什么局限性？
單一使用的樣式用id，需要程序、js動態(tài)控制的樣式用id，id在頁面只能使用一次！
提供少用id，因為id可能和頁面嵌的程序沖突（比如名稱相同等）！
該在什么時候使用ID，什么時候使用class？
單一的元素，或需要程序、JS控制的東西，需要用id定義；重復(fù)使用的元素、類別，用class定義。
通配符選擇器
*{樣式屬性：值;}
偽類選擇器
鏈接偽類選擇器 (主要針對于a標(biāo)簽 可以沒有但是順序不能顛倒)
:link /*未訪問的鏈接*/
:visited /*已訪問的鏈接*/
:hover /*鼠標(biāo)移動到鏈接上*/ 最常用的鏈接偽類選擇器
:active /*選定的鏈接 別松開的狀態(tài)*/
結(jié)構(gòu)(位置)偽類選擇器CSS3 (第幾個孩子的那種選擇器)
:first-child 選取屬于其父元素的首個子元素的指定選擇器
:last-child 選取屬于其父元素的最后一個子元素的指定選擇器
:nth-child(N) 匹配屬于其父元素的第N個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數(shù)。N可以是數(shù)字，關(guān)鍵詞或公式
? 關(guān)鍵字 ：odd是奇數(shù) even是偶數(shù)
? 表達(dá)式： 2n偶數(shù) 2n+1奇數(shù)n為倍數(shù)
:nth-last-child()是從最后一個子元素開始數(shù) 默認(rèn)是首元素
目標(biāo)偽類選擇器
:target目標(biāo)偽類選擇器 選擇器可用于選取當(dāng)前活動的目標(biāo)元素
復(fù)合選擇器
交集選擇器
由兩個選擇器構(gòu)成，第一個為標(biāo)簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如p.boxone{}，讀作類名為boxone的段落標(biāo)簽
并集選擇器
當(dāng)各個選擇器的樣式完全相同或者部分時，就可以采用并集選擇器。如.one,.two,.h1{ 相同樣式 }
只要逗號隔開的，所有選擇器都會執(zhí)行后面樣式
后代選擇器
又稱為包含選擇器，用來選擇元素或者元素組的后代。
寫法：將外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格隔開，當(dāng)標(biāo)簽發(fā)生嵌套時，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。如div p{ 樣式 }
.box p{ }的意思就是使用.box類選擇器的子元素中，所有包含p標(biāo)簽的采用此樣式。
子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素。
寫法：
父級在前，子集在后，中間用 > 連接，注：> 兩邊各要有一個空格，不包含孫子，子孫集，只是兒子集不用 > 則可以選擇所有后代
屬性選擇器
選取標(biāo)簽帶有某些特殊屬性的選擇器可以使用屬性選擇器
寫法：a[title] {} 屬性選擇器中庸中括號來表示
div[class^=font] { } 以font開始的
div[class$=font] { } 以font結(jié)束的
div[class*=tao] { } 表示tao在任意位置都可以
偽元素選擇器(CSS3)
.dome 類選擇器
:first-child 偽類選擇器
::first-letter 偽元素選擇器
E::first-letter 文本的第一個單詞或字
E::first-line 文本第一行
E::selection 可改變選中文本的樣式(鼠標(biāo))
E::before{ content:"文字" } 盒子內(nèi)部前面(加字體)
E::after{ content:"文字" } 盒子內(nèi)部后面(加字體)
|
