類選擇器：
類選擇器的用法很簡單，個人最常用的寫法如下：
.warning
p.warningcolor: red;
}.warning
class="warning">
hello
div>
class="warning">world
其顯示如下：
由此可見div元素雖然有.warning的樣式，但並未生效
多類選擇器：
一般寫法如：
class="warning urgent">
hello
div>
可以分別設定.warning和.urgent的樣式
.warning
.urgent
.warning.urgent
class="warning urgent">
hello
div>
class="warning message">worldp>顯示如下：
p元素因類選擇器不匹配，樣式不生效
屬性選擇器
1.簡單屬性選擇器
如果希望選擇有某個屬性的元素，而不論該屬性的值是什麼，可以使用簡單的屬性選擇器
h1[class]
//可以選擇有class值的所有h1元素，使其文字為紅色
a[href][title]
//可以將同時又href和title屬性的html超連結的文字設定為粗體
a[href='']
href=""> hello a> //文字為紅色
href="">worlda> //不受影響
h1[class='warning urgent']
class="warning urgent">hello
3.根據部分屬性值選擇
前面介紹的是完全串匹配，有時候不需要匹配完全，這就需要根據部分值選擇元素
[foo^="bar"] 選擇foo屬性值以"bar"開頭的所有元素
[foo$=
"bar"] 選擇foo屬性值以"bar"結尾的所有元素
[foo*="bar"] 選擇foo屬性值中包含子串"bar"的所有元素
div > a
hello
href="">worlda>
h1>
href="">
juzipchy
a>
div>這個規則會把div下面出現的第乙個a元素變成紅色，第二個a元素無變化
因為第乙個a是div的直接子元素，第二個a為div的後代元素．子選擇器限制為值匹配文件樹結構中直接相連的元素
選擇相鄰兄弟元素（＋）
要選擇緊接在另乙個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟結合符，這表示為乙個加號（＋）
第二個h1並不是div的相鄰元素，樣式無改變，
要記住：用乙個結合符只能選擇兩個相鄰兄弟中的第二個元素
偽類選擇器
１．鏈結偽類：
：link
：visited
2.動態偽類：
：hover
：active
3.選擇第乙個元素
：first-child選擇器用於選取屬於其父元素的首個子元素的指定選擇器。
p
:first-child
最常見的錯誤是認為p:first-child會選擇p元素的第乙個子元素，實際上是選擇作為某元素的第乙個子元素為p元素的元素．
偽元素選擇器１．:first-letter：設定乙個塊級元素首字母的樣式，而且僅對該字首字母設定樣式
２.：first-line：影響元素中第乙個文字行
注意：所有的偽元素都必須放在出現該偽元素的選擇器的最後面，因此如果寫成p:first-line em就是不合法的，因為偽元素出現在選擇器主體前面
３.：before 插入生成的內容，並設定其樣式
４.：after 插入生成的內容，並設定其樣式
《CSS權威指南》 筆記2（選擇器）
第二章 選擇器 css主要優點之一 很容易地向所有同型別的元素應用一種樣式。元素選擇器 文件的元素是最基本的選擇器 html 通 配選擇器 對所有元素進行匹配，新增樣式 結合選擇器 h1,h2,h3,h4,h5,h6 類選擇器 基本格式 box 可以忽略通配選擇器。不同元素中同乙個class有不同的...
css權威指南學習筆記 css選擇器
1，選擇器 選擇器的一些基本常用規則基本都記得，w3c上都有，平時也常用，不常用的一些後代選擇器經常就忘記了。一些歸納一下後代選擇器，加深一下印象 a 子選擇器 p a a是直接是p的兒子，而不是孫子曾孫子。就是兒子，只有一代關係。b 相鄰兄弟選擇器 h1 h1 和 必須擁有相同的父元素。他們是同胞...
CSS權威指南 偽元素選擇器
css2.1定義了四個偽元素 設定首字母樣式 first letter 設定第一行樣式 first line 設定之前樣式 before 設定之後樣式 after 所有偽元素都必須放在出現該偽元素的選擇器的最後面。設定首字母樣式 用於設定第乙個塊級元素首字母的樣式，而且僅對該字母設定樣式 最好的我們...