CSS學習筆記整理

11699847034_6b43d779b8_z

今天designrock分享的這篇文章主要是在整理關於css選擇器的部分,雖然很多大部份的人都懂都看過,但是這篇文章整理的很詳細的也可以在讓我們整理一下自己腦袋中的選擇器讓自己在重新學習一次,希望對你有幫助

文章來源:http://www.w3cfuns.com/blog-5442453-5400417.html

 

關於CSS選擇器的優化
css優化的相關知識點:

1. 瀏覽器讀取你的選擇器,遵循的原則是從選擇器的右邊到左邊讀取。換句話說,瀏覽器讀取選擇器的順序是由右到左進行

2. 選擇器的最後一部分,也就是選擇器的最右邊(在這個例子中就是a[title]部分)部分被稱為“關鍵選擇器”,它將決定你的選擇器的效率如何?是高還是低。

3. 越具體的關鍵選擇器,其性能越高

 

選擇器有一個固有的效率,我們來看Steve Souders給排的一個順序:
1. id選擇器(#myid)
2. 類選擇器(.myclassname)
3. 標籤選擇器(div,h1,p)
4. 相鄰選擇器(h1+p)
5. 子選擇器(ul > li)
6. 後代選擇器(li a)
7. 通配符選擇器(*)
8. 屬性選擇器(a[rel="external"])
9. 偽類選擇器(a:hover,li:nth-child)
David在《Use efficient CSS selectors》中介紹了幾種書寫高效率的CSS選擇器的方法,下面我將他們移到這裡來讓大家參考:
1. 避免普遍規則
2. 不要在ID選擇器前加標籤名或類名
3. 不要在類名選擇器前加標籤名
4. 盡可能使用具體的類別
5. 避免使用後代選擇器
6. 標籤分類規則中不應該包含一個子選擇器
7. 子選擇器的問題
8. 借助相關繼承關係
9. 使用範圍內的樣式表

 

CSS3 選擇器——基本選擇器

 

一、 通配符選擇器(*)

*{ marigin: 0; padding: 0; }

 

二、 元素選擇器(E)

li {background-color: grey;color: orange;}

 

三、類選擇器(.className)

<li class="active important items">

</li>.important {font-weight: bold; color: yellow;}

 

結合使用

p.items {color: red;}

 

四、id選擇器(#ID)

#first {background: lime;color: #000;}

#last {background: #000;color: lime;}

 

五、後代選擇器(E F)
後代選擇器也被稱作包含選擇器,所起作用就是可以選擇某元素的後代元素,比如說:EF,前面E為祖先元素,F為後代元素,所表達的意思就是選擇了E元素的所有後代F元素,請注意他們之間需要一個空格隔開。這裡F不管是E元素的子元素或者是孫元素或者是更深層次的關係,都將被選中,換句話說,不論F在E中有多少層關係,都將被選中

.demo li {color: blue;}

 

六、子元素選擇器(E>F)
子元素選擇器只能選擇某元素的子元素,其中E為父元素,而F為子元素,其中E>F所表示的是選擇了E元素下的​​所有子元素F。這和後代選擇器(E F)不一樣,在後代選擇器中F是E的後代元素,而子元素選擇器E > F,其中F僅僅是E的子元素而以。

ul > li {background: green;color: yellow;}

 

七、相鄰兄弟元素選擇器(E + F)
相鄰兄弟選擇器可以選擇緊接在另一元素後的元素,而且他們具有一個相同的父元素,換句話說,EF兩元素具有一個相同的父元素,而且F元素在E元素後面,而且相鄰,這樣我們就可以使用相鄰兄弟元素選擇器來選擇F元素。

.active + li {background: green;color: yellow; border: 1px solid #ccc;}

 

八、通用兄弟選擇器(E ~ F)
通用兄弟元素選擇器是CSS3新增加一種選擇器,這種選擇器將選擇某元素後面的所有兄弟元素,他們也和相鄰兄弟元素類似,需要在同一個父元素之中,換句話說, E和F元素是屬於同一父元素之內,並且F元素在E元素之後,那麼E ~ F 選擇器將選擇中所有E元素後面的F元素。比如下面的代碼:

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

 

九、群組選擇器(selector1,selector2,…,selectorN)
群組選擇器是將具有相同樣式的元素分組在一起,每個選擇器之間使用逗號“,”隔開,如上面所示selector1,selector2,…,selectorN。這個逗號告訴瀏覽器,規則中包含多個不同的選擇器,如果不有這個逗號,那麼所表達的意就完全不同了,省去逗號就成了我們前面所說的後代選擇器,這一點大家在使用中千萬要小心加小心。我們來看一個簡單的例子:(優化css時很有用途)

.first, .last {background: green;color: yellow; border: 1px solid #ccc;}

 

CSS3 選擇器——屬性選擇器
從上一節展示的CSS3選擇器的圖表中,我們可以知道,CSS3的屬性選擇器主要包括以下幾種:
1. E[attr]:只使用屬性名,但沒有確定任何屬性值;
2. E[attr="value"]:指定屬性名,並指定了該屬​​性的屬性值;
3. E[attr~="value"]:指定屬性名,並且具有屬性值,此屬性值是一個詞列表,並且以空格隔開,其中詞列表中包含了一個value詞,而且等號前面的“~”不能不寫;
4. E[attr^="value"]:指定了屬性名,並且有屬性值,屬性值是以value開頭的;
5. E[attr$="value"]:指定了屬性名,並且有屬性值,而且屬性值是以value結束的;
6. E[attr*="value"]:指定了屬性名,並且有屬性值,而且屬值中包含了value;
7. E[attr|="value"]:指定了屬性名,並且屬性值是value或者以“value-”開頭的值(比如說zh-cn);

 

CSS3 選擇器——偽類選擇器
CSS的偽類語法和別的語法有點不一樣,其主要有兩種語法表達方式

一、動態偽類

如“:hover”,":active"和":focus"。先來看最常見的錨點偽類
.demo a:link {color:gray;}/*鏈接沒有被訪問時前景色為灰色*/
.demo a:visited{color:yellow;}/*鏈接被訪問過後前景色為黃色*/
.demo a:hover{color:green;}/*鼠標懸浮在鏈接上時前景色為綠色*/
.demo a:active{color:blue;}/*鼠標點中激活鏈接那一下前景色為藍色*/
1. :hover用於當用戶把鼠標移動到元素上面時的效果;

2. :active用於用戶點擊元素那一下的效果(正發生在點的那一下,鬆開鼠標左鍵此動作也就完成了)

3. :focus用於元素成為焦點,這個經常用在表單元素上。

三、 UI元素狀態偽類

我們把":enabled",":disabled",":checked"偽類稱為UI元素狀態偽類,這些主要是針對於HTML中的Form元素操作,最常見的比如我們"type="text"有enable和disabled兩種狀態,前者為可寫​​狀態後者為不可狀態;另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態。來看兩個實例,比如說你想將"disabled"的文本框與別的文本框區別出來,你就可以這樣應用

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

 

三、CSS3的:nth選擇器
這節內容才是關鍵,也是CSS3選擇器最新部分,有人也稱這種選擇器為CSS3結構類,下面我們通過實際的應用來具體了解他們的使用和區別,首先列出他具有的選擇方法:
1. :first-child選擇某個元素的第一個子元素;

2. :last-child選擇某個元素的最後一個子元素;

3. :nth-child()選擇某個元素的一個或多個特定的子元素;

4. :nth-last-child()選擇某個元素的一個或多個特定的子元素,從這個元素的最後一個子元素開始算;

5. :nth-of-type()選擇指定的元素;

6. :nth-last-of-type()選擇指定的元素,從元素的最後一個開始計算;

7. :first-of-type選擇一個上級元素下的第一個同類子元素;

8. :last-of-type選擇一個上級元素的最後一個同類子元素;

9. :only-child選擇的元素是它的父元素的唯一一個了元素;

10. :only-of-type選擇一個元素是它的上級元素的唯一一個相同類型的子元素;

11. :empty選擇的元素裡面沒有任何內容。

關於
:nth-child(n),其中n是一個簡單的表達式,那麼"n"取值是從“0”開始計算的,到什麼時候結束我也不知道,如果你在實際應用中直接這樣使用的話,將會選中所有子元素,比如說,在我們的demo中,你在li中使用":nth-child(n)",那麼將選中所有的"li",如:

Ps:請注意了,這裡的“n”只能是"n",不能使用其他字母代替,不然會沒有任何效果的。

“:nth-child()”是從元素的第一個開始計算,而“:nth-last-child()”是從元素的最後一個開始計算,他們的計算方法都是一樣的。同樣在IE6-8和FF3.0-瀏覽器不支持“:nth-last-child()”選擇器。

 

四、 否定選擇器(:not)
否定選擇器和jq中的:not選擇器一模一樣,就拿form中的元素來說明這個選擇器的用法,比如你想對form中所有input加邊框,但又不想submit也起變化,此時就可以使用:not為實現

input:not([type="submit"]) {border: 1px solid red;}

 

五.偽元素
::first-line選擇元素的第一行,比如說改變每個段落的第一行文本的樣式,我們就可以使用這個
p::first-line {font-weight:bold;}
::first-letter選擇文本塊的第一個字母,除非在同一行里麵包含一些其它元素,不過這個主要運用於段落排版上多,比如說首字下沉,
p::first-letter {font-size: 56px;float:left;margin-right:3px;}
::before和::after這兩個主要用來給元素的前面或後面插入內容,這兩個常用"content"配合使用,見過最多的就是清除浮動,

  1. .clearfix:before,
  2.         .clearfix:after {
  3.                              content: “.";
  4.                              display: block;
  5.                              height: 0;
  6.                              visibility: hidden;
  7.                           }
  8.           .clearfix:after {clear: both;}
  9.          .clearfix {zoom: 1;}

 

::selection用來改變瀏覽網頁選中文的默認效果
::selection”只能設置兩個屬性,一個就是background,另一個就是color屬性,設置其他屬性是沒有任何效果的。
::selection使用語法:

  1. /*Webkit,Opera9.5+,Ie9+*/
  2.    ::selection {
  3.         background: 颜色值;
  4.         color:颜色值;
  5. }
  6.    /*Mozilla Firefox*/
  7.    ::-moz-selection {
  8.         background: 颜色值;
  9.         color:颜色值;
  10.    }

 

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s