CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
#選擇器通常是您需要改變樣式的 HTML 元素。
#每條聲明由一個屬性和一個值組成。
下面這行代碼的作用是將 h1 元素內(nèi)的文字顏色定義為紅色，同時將字體大小設(shè)置為 14 像素。
h1 {color:red; font-size:14px;}
下面的示意圖為您展示了上面這段代碼的結(jié)構(gòu)：
css_selector.gif
- 選擇器
- 元素選擇器
指html的某個元素,比如p、h1、div、a甚至html本身html,h1,p { color:black; } #這里有將html,h1.p進行分組,即這三個元素的color屬性都是black的 - 類選擇器
html中的元素是有class屬性,可以指定該屬性為選擇器#.html <h1 class="aClass bClass"> h1 test. </h1> <p class="aClass"> p test. </p> #.css .aClass { color:red;} #這里的.就是類選擇器,即上面的h1,p都被選中,如果只想要p,可以這樣: p.aClass { color:red;} #如果只想要h1可以 .aClass.bClass { color:red;} #然后在前在后沒區(qū)別 .bClass.aClass { color:red;} - id選擇器
html中的元素是有id屬性,可以指定該屬性為選擇器#.html <h1 id="aId"> h1 test. </h1> <p class="bId"> p test. </p> #.css #aId { color:red;} #這里的#就是id選擇器,即上面的h1被選中,這里特別注意和類選擇器的差別 #1.id在一個文檔里面只會存在一個,所以 起作用的元素只會有一個 #2.id屬性的值不能包含空格,即不存在<h1 id="aId bId">這種情況也就不存在#aId#bId { color:red;} - 屬性選擇器
html中的元素有很多屬性,可以指定該任意屬性為選擇器#.html <h2 title="Hello world">Hello world</h2> <a title="world" >W3School</a> #.css [title] { color:red; } #這里的[]就是屬性選擇器,可以看到h2、a都被選中了,當然可以只選a像下面這樣 a[title] { color:red; } [title][href] { color:red; } a[title][href] { color:red; } #也可以根據(jù)屬性的具體值來選定無素 [title="Hello world"] { color:red; } #當然也可以指定值是部分的,下面這樣的話h2和a都會被選中 [title~="world"] { color:red; } #這里有還有匹配局部屬性值的 [abc^="def"] 選擇 abc 屬性值以 "def" 開頭的所有元素 [abc$="def"] 選擇 abc 屬性值以 "def" 結(jié)尾的所有元素 [abc*="def"] 選擇 abc 屬性值中包含子串 "def" 的所有元素 [lang|="en"] 選擇 lang 屬性等于 en 或以 en- 開頭的所有元素 - 后代選擇器
html元素是可以嵌套的#.html <h1>This is <p> a <em>important</em> </p>heading</h1> <p>This is a <em>important</em> paragraph.</p> #.css h1 em { color:red; } # 空格就是后代選擇器 這時候em會被選中,這里你可能注意到他們的層級是這樣的h1-p-em,也就是說h1跟em中間不管隔了多少個其它元素都是會被選中的,然后這里選中的是em,不是h1切記。 - 子元素選擇器
跟上面的后代選擇器很像,但你如果只想指定子元素,中間不允許跨多個其它子元素可以用這個#.html <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> #這可看到 h1-strong strong #h1-em-strong #.css h1 > strong { color:red; } # >就是子元素選擇器,只有第一行被作用到了,第二行因為中間有em所以無匹配到.第一行的兩個strong都會命中 - 相鄰兄弟選擇器
選擇緊接在另一個元素后的元素，而且二者有相同的父元素#.html <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> #.css h1+p { color:red; } # + 就是相鄰兄弟選擇器,第一個p被作用到了 - 兄弟選擇器
查找某一個指定元素的后面的所有兄弟結(jié)點#.html <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> #.css h1~p { color:red; } #~就是兄弟選擇器,上面的所有p都會作用到 - 偽類、偽元素
用于向某些選擇器添加特殊的效果。#.html <p>some <i>text</i>. some <i>text</i>.</p> <p>some <i>text</i>. some <i>text</i>.</p> #.css p:first-child i { color:blue; } #:指偽類偽元素，第一個p元素內(nèi)部所有i元素被匹配 #:focus擁有鍵盤輸入焦點的元素 #:link 未訪問的鏈接 #:visited 已訪問的鏈接 #:hover 鼠標移動到鏈接上(hover必須被置于link和visited之后，才有效) #:active 選定的鏈接(active必須被置于hover之后，才有效) #:first-child第一個元素 #:lang帶有指定 lang 屬性的元素 #:first-letter 向文本的第一個字母添加特殊樣式 #:first-line 向文本的首行添加特殊樣式 #:before 在元素之前添加內(nèi)容 #:after 在元素之后添加內(nèi)容 - 總結(jié)：
- 無符號即為元素選擇器
- ,進行分組,即多個選擇器的意思
- .class選擇器
- #id選擇器
- []屬性選擇器
- = 完全匹配
- ~=單詞匹配
- ^=匹配開頭
- $=匹配結(jié)尾
- *=子串匹配
- |=開頭匹配或加-開頭匹配
- 空格后代選擇器
- >子元素選擇器
- +相鄰兄弟選擇器
- ~兄弟選擇器
- :偽類或偽元素
- 元素選擇器
- 屬性
常用的屬性需要自己去背，不常用的也要了解一下，需要用到的時候，快速查找相關(guān)文檔 - 值
- 值的不同寫法和單位
除了英文單詞 red，我們還可以使用十六進制的顏色值 #ff0000：
還可以通過兩種方法使用 RGB 值：p { color: #ff0000; }p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); } - 如果值為若干單詞，則要給值加引號
p {font-family: "sans serif";} - 如果要定義不止一個聲明，則需要用分號將每個聲明分開
p { text-align: center; color: black; font-family: arial; }
- 值的不同寫法和單位
