css 選取器 (學習筆記)，css選取器學習筆記

css 選取器 (學習筆記)，css選取器學習筆記

參考 http://zachary-guo.iteye.com/blog/605116

1. div+p  選擇緊接在 <div> 元素之後的所有 <p> 元素。
解釋 : find p , p.prev = div 就ok! 

2. [class~=flower]選擇 title 屬性包含單詞 "flower" 的所有元素。
解釋 : 注意是單詞哦 class="abc xyz" abc這個算一個單詞 

 3. [lang|=en]選擇 lang 屬性值以 "en" 開頭的所有元素。
解釋 : 注意所謂的開頭一定要用 - 做分隔字元 , class="en-yy" ok, class="en_yy" fail
            
4. [src^="https"] 
解釋 : 屬性 str 開頭是 https , 這個可以匹配 httpsss 也行不像 |

5. [src$=".pdf"] 
解釋 ： $是後面，和 ^ 相反，跟正則一樣理解

6. [src*=ggc]
解釋 : 只要有ggc就中，像sql 的like %ggc%

4.p:first-child 選擇屬於父元素的第一個子項目的每個 <p> 元素。
解釋 : elem has any parent , elem is first child , elem is p . 3個condition true 就 ok       
note : 這個和 p:nth-child(1) 是一樣的 
區別 nth-of-type 和  nth-of-child
這兩者的差異用一個跟切合實際的情況比喻就是計劃生育查人口：nth-of-child是如果是第二胎，且是女孩，罰款！nth-of-type是管他第幾胎，第二個出身的女孩，罰款！

nth-of-type(2n+1) 演算法，n就代表每一個row,從0,1,2... 2n+1 就是 2*0+1, 2*1+1, 2*2+1 ...普通乘法和加法來的，那麼每一次算出答案後就讓那個答案亮燈咯 
5.p:nth-of-type(5) 
解釋 : eq(4) 選中第5個

6.p:nth-of-type(n+3) ||  p:nth-last-of-type(-n+3) 後面算起 child 也是有
解釋 : >=3

7.p:nth-of-type(-n+3)
解釋 : <=3

8. p:nth-of-type(odd/even)
解釋 : 單數 , 雙數

9.p:nth-of-type(3n+2)
解釋 : 一開始n是0 算一 +2 可以表示為其實點 . 從第2個拿起，3*n就是3的倍數，所以可以表示為每3個亮一個燈咯, 整句就是從第2個開始，每3個亮1個(起點2也亮哦)

10. p:nth-of-type(n+3):nth-of-type(-n+5) 
解釋 : between 3-5 (3和5都算) , 原理是filter2 次咯

css派生選取器，id選取器,類別選取器的具體定義與作用

派生選取器可以使一個元素裡的子項目定義樣式例如：li a { font-size:14px} 就是給li下的子項目a定義一個14px號像素的字型樣式 類別選取器在html中引入css樣式通常由，類別選取器在CSS中用一個“.”點開頭表示如：.box {width:960px; margin:0 auto; padding:0px; overflow:hidden}
在html頁面中，用class="類別名"的方法調用：<div class="box">這裡是內容</div> 類別選取器方法比較簡單靈活，可以隨時根據頁面的需求建立和刪除 還有，id選取器在CSS中用“#”號開頭表示如：#box {width:960px; margin:0 auto; padding:0px; overflow:hidden} 在html頁面中，用id="類別名"的方法調用：<div id="box">這裡是內容</div>id選取器和類別選取器其實是一樣的通常id選取器僅是用來表示不重複的樣式相對的來說，類別選取器靈活一些，而id選取器僅表示重要的樣式欄位
 
css的各種選取器的用法，大仙講解

CSS 元素選取器

html {color:black;}

h1 {color:blue;}
h2 {color:silver;}

選取器分組

body, h2, p, table, th, td, pre, strong, em {color:gray;}

CSS 類別選取器

.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}

CSS 識別碼選取器

#mostImportant {color:red; background:yellow;}

CSS 屬性選取器

img[alt] {border: 5px solid red;}
p[class="important warning"] {color: red;}

CSS 後代選取器

h1 em {color:red;}

CSS 子項目選取器

h1 > strong {color:red;}

CSS 相鄰兄弟選取器

h1 + p {margin-top:50px;}