css基礎布局複習筆記(三)選擇器

2022-09-17 16:27:20 字數 1977 閱讀 7962

目前主要有四類選擇器:組合選擇器、偽類選擇器、結構性偽類選擇器、偽元素選擇器。每類選擇器的具體用法如下:

繼承的優先順序最低,所以比較優先順序一點要在精準控制元素的基礎上進行比較。

1、先比較id 個數 個數高的,優先順序高

2、如果id個數相等,比較class選擇器個數 

3、再比較標籤選擇器數目

偽類選擇器用於向某些選擇器新增特殊的效果

link  未被點選的鏈結   

visited  已被點選的鏈結   

active  選定的時候  

hover  滑鼠懸停的時候

css3新增。通過樣式的方式在元素後面新增內容 字面意思假的元素。

1、 ::first-letter第乙個字

2、::first-line第一行(以瀏覽器為準的第一行)

3、::selection被選中的字行(滑鼠選中的字段)只能向 ::selection 選擇器應用少量 css 屬性:color、background、cursor 以及 outline。

4、::before::after

必須帶乙個content屬性;

在內部內容的前面或者後面插入內容;

當插入的內容定義寬高和其他屬性時,其實就是乙個盒子(必須通過display轉換,因為預設是乙個行內元素);

注意:input不能使用偽元素。(為什麼input不支援偽元素(:after,:before)?)

結構性偽類選擇器根據巢狀結構選擇元素。屬於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 標籤選擇器 寫上標籤名 ...