目前主要有四類選擇器:組合選擇器、偽類選擇器、結構性偽類選擇器、偽元素選擇器。每類選擇器的具體用法如下:
繼承的優先順序最低,所以比較優先順序一點要在精準控制元素的基礎上進行比較。
1、先比較id 個數 個數高的,優先順序高
2、如果id個數相等,比較class選擇器個數
3、再比較標籤選擇器數目
偽類選擇器用於向某些選擇器新增特殊的效果
link 未被點選的鏈結css3新增。通過樣式的方式在元素後面新增內容 字面意思假的元素。visited 已被點選的鏈結
active 選定的時候
hover 滑鼠懸停的時候
1、 ::first-letter第乙個字
2、::first-line第一行(以瀏覽器為準的第一行)
3、::selection被選中的字行(滑鼠選中的字段)只能向 ::selection 選擇器應用少量 css 屬性:color、background、cursor 以及 outline。
4、::before和::after
必須帶乙個content屬性;注意:input不能使用偽元素。(為什麼input不支援偽元素(:after,:before)?)在內部內容的前面或者後面插入內容;
當插入的內容定義寬高和其他屬性時,其實就是乙個盒子(必須通過display轉換,因為預設是乙個行內元素);
結構性偽類選擇器根據巢狀結構選擇元素。屬於css3部分,低版本瀏覽器不 相容
1、li:first-of-type
/*選擇父元素裡面的第乙個li元素無視其他元素*/ = li:nth-of-type(1)
在下面的**中,p1和p5均被選中。
<div
class
="content"
>
<
p>p1
p>
<
p>p2
p>
<
p>p3
p>
<
p>p4
p>
<
span
>span1
span
>
div>
<
p>p5
p>
2、li:last-of-type /*選擇父元素裡面的倒數第乙個li元素 無視其他元素*/
3、p:only-of-type /*選擇父級元素裡面唯一的p 可以存在其他子元素*/
4、li:first-child
/*選擇父元素的第乙個元素並要求第乙個元素為li*/
只能選擇到上面元素的p1.
5、li:last-child /*選擇父元素的倒數第乙個元素 並要求這個元素為li */
6、p:only-child /*選擇父元素中唯一的子元素p 不允許有其他子元素*/
7、p:nth-of-type(2) /*選擇父元素中第二個p元素 無視其他元素*/
8、p:nth-last-of-type(2)/*選擇父元素中倒數第二個p元素 無視其他元素*/
9、p:nth-child(2) /*選擇父元素中第二個子元素 並要求此元素為p*/
10、p:nth-last-child(2)
11、p:not(.box) /*選擇除了.box之外的p*/
12、e:first-line 表示e元素中的第一行
e:first-letter 表示e元素中的第乙個字元
CSS選擇器複習
通用選擇器 選擇到所有的元素 選擇子元素 選擇到元素的直接後代 第一級子元素 相鄰兄弟選擇器 選擇到緊隨目標元素後的第乙個元素 普通兄弟選擇器 選擇到緊隨其後的所有兄弟元素 偽類選擇器 before,after在元素內容前面 後面新增內容 相當於行內元素 css3結構選擇器 nth child 選擇...
CSS複習1 選擇器
css 規則由兩個主要的部分構成 選擇器,以及一條或多條宣告。每條宣告由乙個屬性和乙個值組成。屬性 property 是您希望設定的樣式屬性 style attribute 每個屬性有乙個值。屬性和值被冒號分開。你可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇...
CSS選擇器之基礎選擇器
選擇器 選擇符 就是根據不同需求把不同的標籤選出來這就是選擇器的作用。簡單來說,就是選擇標籤用的。標籤選擇器 又稱元素選擇器,指用html標籤作為選擇器,為頁面中某類標籤設定css樣式。缺點 不能差異化設定樣式,只能選擇全部的當前標籤。語法 基礎選擇器之標籤選擇器title 標籤選擇器 寫上標籤名 ...