**：
執行結果為：段落是紅色的。
段落是紅色的。
注意：上面是乙個簡單的演示示例
重點看 元素
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等於...