一. css3 簡短介紹
1.css3 的歷史
css2
---》 css3
-webkit chrome / safari
-ms ie
-moz firefox
-o opera
注： 一開始每家瀏覽器在css提出標準的時候，每個瀏覽器實現版本的時間不齊，所以每個瀏覽器有乙個自己實現的標準。所以就會有前端之稱。 在後面每家瀏覽器商發現大家都支援css3後，所以都遵守css3發布的乾淨版本。知道現在，css3還是有部分屬性每個瀏覽器還需要加上字首才可以使用。這個與瀏覽器的核心有關。
檢視相容性手冊：http:
權威的**： http:
可以使用autoprefixer 使用這個外掛程式，打包後會自動加上相容性的字首
預處理器：pre-processor,有一定的語法規範，然後編譯成css**
less/sass cssnext：外掛程式
後處理器：post-processor，補齊**的字首，達到相容性
autoprefixer： 外掛程式
不管是預處理器，還是後處理器，都要使用postcss 外掛程式，才能使用上面的預處理器或者後處理器
問: postcss 是啥？
答： 用js實現的css的抽象的語法樹ast
(abstract syntax tree)，剩下的事情留給後人來做了，充分體現了擴充套件性，有200多個
問：cssnext是啥？
答：cssnext 有點像css4.
0， 簡化版的less和sass 是朝著css4.
0的版本來發展，用來實現一些未來標準的（未完全在各大瀏覽器）
二.css3 選擇器
關係型選擇器：選擇器模式，e
+f（選完e後，在選擇下乙個滿足條件的興地元素節點）
e~f(選完e後，選擇下面所有的滿足條件的兄弟元素節點)
e>
f(父子選擇器)
屬性選擇器：e
[attr~
="val"
](選完e後，屬性名必須要有val的元素)
e[attr|=
"val"
](選完e後，屬性名為attr的必須要有val,或者是val-的元素)
e[attr^=
"val"
](選完e後，屬性名為attr,和以val開頭的元素)
e[attr$=
"val"
](選完e後，屬性名為attr,以val結尾的元素)
e[attr*=
"val"
](選完e後，只要存在過val的元素)
偽元素選擇器：:
:before :befor :
:after :after 在css2中幾個冒號都行,下面的必須要有兩個冒號
e::placeholder 只能改變字型顏色， 一般不能用，相容性差,需要加字首
e::selection 用與滑鼠選中字型的顏色,只能設定三個屬性，color,background-color,text-shadow,相容性比較好，只要firefox才要加字首
偽類選擇器：被選中元素的一種狀態
e:not
(val)
(在選中e後，不是val的選擇器)
,與jq的not相似 一般用於,去除個別不需要加樣式的元素
e:root
(root,根標籤選擇器，root包含 html,一般直接:root使用)e:
target
(target,被錨點標記，location.hash = 被標記之後的div，可以使用css控制頁面結構樣式)
----
----
----
----下面這五種選擇器會被其他元素影響--
-------
e:first-
child
(選中e的前提下，裡面第乙個元素)
e:last-child:
(選中e的前提下，裡面選擇最後乙個元素)
e:only-
child
(選中e後，裡面獨生子設定樣式)
e:nth-
child
(n)(選擇e的前提下面，裡面可以選中一系列的元素， n從0開始查數的，css中從1開始查數，例如：2n是偶數，2n+
1 是奇數)
e:nth-last-
child
(n) （在選中的e的前提下，倒序查詢元素）
------
----
----
--上面面這五種選擇器會被其他元素影響-
,所以不常用--
----
----
----
----
----
--下面這五種選擇器不會會被其他元素影響-
,常用-！！！！--
-----e
:first-
of-type:
(選中e的前提下面，選中滿足型別元素的第乙個)
e:last-
of-type:
(選中e的前提下面，選中滿足型別元素的最後乙個)
e:only-
of-type:
(選中e的前提下，只有乙個滿足型別的元素,獨特的元素)
e:nth-of-
type()
:(選擇e的前提下面，裡面可以選中同一型別的元素， n從0開始查數的，css中從1開始查數，例如：2n是偶數，2n+
1 是奇數)
e：nth-
of-last-
type()
:(選中e的前提下，倒敘查詢滿足型別的元素)
e:empty 元沒有元素節點的素被選中 沒有haschildnodes,
----
----
----
-針對表單元素選擇器--
----
-------
e:checked 表單元素中被選中的元素，
(下面有demo)
e:disabled 表單元素選中disabled的元素
e:enabled 表單元素選中enabled的元素
e:read-only 表單元素選中只能讀的元素
e：write-only 表單元素選中只能寫的元素
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
css3 基本選擇器
css3 之前的基本選擇器 萬用字元選擇器 元素選擇器 類選擇器 id選擇器 後代選擇器。css3 新增基本選擇器 子元素選擇器 相鄰兄弟元素選擇器 通用兄弟選擇器 群組選擇器 子元素選擇器 只能選擇某元素的子元素 不包含所有後代，至選擇下一代 父元素 子元素 相鄰兄弟元素選擇器 可以選擇在乙個元素...
css3選擇器總結
選擇器分為 共分為10種 基本選擇器 萬用字元 元素選擇器 e id選擇器 id 類選擇器 class 群組選擇器 selectori,selectorv 瀏覽器對選擇器都可使用 層次選擇器 後代選擇器 e f 子選擇器 e f 相鄰兄弟選擇器 e f 通用選擇器 e f 偽類選擇器 一般有 lin...