CSS 筆記之 CSS 選擇器

**：

段落是紅色的。

段落是紅色的。

注意：上面是乙個簡單的演示示例

重點看 元素

css 語法的一般形式是 selector;

這篇文章主要講解的是 selector(選擇器)，下面會為每種選擇器舉乙個例子

返回頂部

基礎選擇器分為：

1、型別選擇器

**：

這個段落是紅色的。
這個段落也是紅色的。
這個段落還是紅色的。

這個段落是紅色的。

這個段落也是紅色的。

這個段落還是紅色的。

注意：上面的重點**是 p

是 元素作為選擇器

效果是當指定 元素的字型顏色為紅色時，所有段落的字型都會變成紅色

絕大多數的元素都可以作為選擇器，例如：我也是紅色的。

我還是紅色的

執行結果為：

我也是紅色的。

我還是紅色的

注意：上面的重點**是 *

* 是通用選擇器，顯示的效果為所有元素的字型都變成了紅色

返回 基礎選擇器目錄

5、屬性選擇器

**1：

匹配屬性為 href 的元素：

匹配屬性為 href 的元素：

注意：上面的重點**是 [href] 和含有 href 屬性的那一行**

元素裡面設定了 href 屬性，所以顯示的效果為紅色

**2：

完全匹配，只匹配屬性和值都相同的元素：
返回頂部
返回 基礎選擇器目錄

完全匹配，只匹配屬性和值都相同的元素：

返回頂部

返回 基礎選擇器目錄

注意：上面**是完全匹配的示例

[href="#top"] 匹配屬性和屬性值為 href="#top" 的 元素，顯示效果為紅色字型

[href="#top1"] 匹配屬性和屬性值為 href="#top1" 的 元素，顯示效果為灰色字型

**3：

通過屬性和屬性值中的字串進行匹配：

通過屬性和屬性值中的字串進行匹配：

注意：上面的**通過字串進行匹配，屬性為 href 以及屬性值中有 baidu 這個字串的元素都能匹配上

上面例子中，兩個鏈結裡面都含有 baidu 這個字串，所以顯示效果為字型是橘色的

當然，你將**改成 [href*=w] 時，它們也能匹配上，因為它們的鏈結裡面都含有 w 字元

屬性選擇器還有很多，這裡只列舉了其中的三種

其他的屬性選擇器可以參考

返回 基礎選擇器目錄

返回頂部

組合選擇器：

1、a + b

**：

這是乙個段落。
這是一段測試文字
這是另外乙個段落。
這是另外一段測試文字

這是乙個段落。

這是一段測試文字

這是另外乙個段落。

這是另外一段測試文字

注意：上面最重要的**是 p + span ，表示 元素後面的 元素的背景顏色設定成橘色

這裡要注意乙個很重要的前提條件：元素必須直接跟在 元素的後面

上面的例子中，我在它們兩個之間插入了乙個換行元素

之後，元素後面的 元素就不能被匹配到了

返回 組合選擇器目錄

2、a ~ b

**：

這是乙個段落。
這是一段測試文字
這是另外乙個段落。
這是另外一段測試文字

這是乙個段落。

這是一段測試文字

這是另外乙個段落。

這是另外一段測試文字

注意：這個選擇器與上面的那個選擇器很相似

這個選擇器也是可以匹配 元素後面的 元素，只是這兩個元素之間就算插入了其他元素，它也能夠匹配

所以顯示的結果才會是兩段文字的背景顏色都是橘色

返回 組合選擇器目錄

3、a > b

**：

測試文字1
測試文字2
測試文字3

測試文字1

測試文字2

測試文字3

注意：上面最重要的**是 div > span ，表示將 元素的直接子元素 的背景顏色設定為黃色

要注意的乙個很重要的點是：直接子元素

上面例子中 測試文字2 是 的直接子元素，不是 的直接子元素，所以它無法被匹配

返回 組合選擇器目錄

4、a b

**：

測試文字1
測試文字2
測試文字3

測試文字1

測試文字2

測試文字3

注意：這個選擇器與上乙個選擇器很相似

這個選擇器是匹配 元素下的所有 元素

注意是所有，而不是子元素

返回 組合選擇器目錄

返回頂部

偽選擇器：

1、偽類選擇器

**1：

注意：上面最重要的**是 a:hover

**2：

這是 body 的第乙個子元素
這是 id="1" 的 div 的第乙個子元素
這是 id="1" 的 div 的第二個子元素
這是 id="2" 的 div 的第乙個子元素
這是 id="2" 的 div 的第二個子元素

這是 body 的第乙個子元素

這是 id="1" 的 div 的第乙個子元素

這是 id="1" 的 div 的第二個子元素

這是 id="2" 的 div 的第乙個子元素

這是 id="2" 的 div 的第二個子元素

注意：上面最重要的**是 p:first-child

表示某個父元素的第乙個子元素如果是 ，那麼該 元素的背景顏色將被設定為黃色

例如上面的例子，的第乙個子元素是 ，所以該 元素的背景顏色被設定為黃色

同樣，id="1" 的 元素的第乙個子元素是 ，所以該 元素的背景顏色也被設定成黃色

但是，id="2" 的 元素的第乙個元素是 ，元素是第二個子元素，所以它不能被匹配

**3：

這是 body 的第乙個子元素
這是 id="1" 的 div 的第乙個子元素
這是 id="1" 的 div 的第二個子元素
這是 id="2" 的 div 的第乙個子元素
這是 id="2" 的 div 的第二個子元素

這是 body 的第乙個子元素

這是 id="1" 的 div 的第乙個子元素

這是 id="1" 的 div 的第二個子元素

這是 id="2" 的 div 的第乙個子元素

這是 id="2" 的 div 的第二個子元素

注意：p:nth-child(1) 與 p:first-child 的效果一模一樣

上面還有一段這樣的** p:nth-child(2) ，表示如果某個父元素的第二個子元素為 ，那麼將該 元素的背景設定為灰色

當然，該選擇器的用法不止這些，具體參考

返回 偽選擇器目錄

2、偽元素選擇器

偽元素選擇器是 css3 中的用法

例如：

/* css3 syntax */

::after
/* css2 syntax */
:after

返回 偽選擇器目錄

返回頂部

css 的選擇器大概可以分為三大類：基礎選擇器、組合選擇器、偽選擇器

這三大類可以單獨使用，也可以混合使用

例如：

這是乙個段落。
這也是乙個段落。

這是乙個段落。

這也是乙個段落。

注意：上面是型別選擇器和 id 選擇器的組合

只有當同時滿足兩種選擇器才能夠匹配

css 參考文件

返回頂部

css選擇器筆記

p.important 選擇器現在會匹配 class 屬性包含 important 的所有 p 元素我們假設 class 為 important 的所有元素都是粗體，而 class 為 warning 的所有元素為斜體，class 中同時包含 important 和 warning 的所有元素還有乙...

CSS選擇器筆記

div 層，塊狀元素 span 包裹內容的容器 行內元素 容器 是設定css樣式的基礎。css是什麼 層疊樣式表 casading style sheets 產生的原因 新增非常多的標籤，相容性問題 css作用 是一種頁面渲染技術，表現形式 html結構，css的渲染，只要是對網頁中得元素的特徵值的...

css筆記 選擇器

1 繼承性 父元素的樣式可以被子元素所繼承 顏色 字型 2 層疊性 給乙個元素設定不同的說明，其效果會疊加。3 優先順序 給同乙個元素設定相同的的說明，效果以後者為準，也叫就近原則 css選擇器 選擇頁面上的元素 1 元素選擇器 通過元素名選擇css作用的目標 比如 2 類選擇器 選擇class等於...