CSS3學習筆記 2 CSS中的選擇器 上

2021-08-02 18:13:46 字數 1309 閱讀 8057

css選擇器即是定位到想要選擇的元素,然後對其配置樣式。目前已經有css3選擇器了,不過使用較多的還是css1和css2,而css3用於擴充套件。

選擇器分類:基本選擇器、復合選擇器、偽選擇器(還分為偽元素和偽類)。

基本選擇器

即使用簡單且頻率高的一些選擇器。

1.通用選擇器

匹配所有html元素,包括和元素。

2.元素選擇器

只匹配某個元素標籤。

元素名/*元素選擇器*/

p/*id選擇器*/

#abc

/*類選擇器*/

.bb/*屬性選擇器*/

執行結果:

復合選擇器

將不同的選擇器進行組合形成新的特定匹配。

1.分組選擇器

多個通用選擇器用逗號分隔。

元素1,元素2,...,元素n

/*後代選擇器*/

p b/*子選擇器*/

p>span

/*相鄰兄弟選擇器*/

span+a

/*普通兄弟選擇器*/

span~a

執行結果:

偽選擇器

分為偽元素選擇器(前置兩個冒號)和偽類選擇器(前置乙個冒號),本節只學習偽元素選擇器。

1.塊級首行選擇器

區塊的首行都會被匹配,而對內聯沒有效果(注意有時內聯直接在body裡也被視為body標籤作區塊用)。可以前寫乙個區塊元素表示只對該元素的首行有效果。

::first-line

/*塊級首字母選擇器*/

::first-letter

/*文字前插入選擇器*/

a::before

/*文字後插入選擇器*/

a::after

執行結果:

CSS3學習筆記 2 CSS盒子模型

w3c盒子與ie6盒子的差異 w3c盒子的寬度 width 指元素內容區域content的寬度 w3c盒子的高度 height 指元素內容區域content的高度 ie6盒子的寬度 width 指元素外邊距區域margin的寬度 ie6盒子的高度 height 指元素外邊距區域margin的高度 t...

CSS3 教程2 CSS選擇器

作用 選擇頁面上的某乙個或者某一類元素 整個html屬於乙個dom樹 標籤選擇器 標籤選擇器會選中頁面中所有該標籤的元素 弊端 所有該標籤會被同時修改樣式 類選擇器 class 給標籤加上class屬性,然後選擇器用.class的格式 好處 可以多個標籤歸類,是同乙個class 示例 id選擇器 給...

CSS學習筆記2 CSS選擇器

一 css選擇器 1.什麼是css選擇器 2.css選擇器的作用 根據指定標籤,在當前頁面中,找到所有符合條件的標籤,設定樣式 3.選擇器需要的注意點 選擇器選中的是所有該型別的標籤,不是一部分,是所有。無論標籤藏得多深,選擇器都可以找到該標籤 二 常見的css選擇器 1.標籤選擇器 作用 在整個頁...