CSS是層疊樣式表（Cascading Style Sheets）的簡稱，並且它是增量式，向后兼容，所以它支持CSS3以前的所有的版本，當然包括CSS2的內容，CSS3也稱作級聯樣式表或者是層級樣式表。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的，
選擇器：指定特定標簽的方式。
一，基本選擇器。通配符*，標簽，類class，id，子，兄弟，群組。
二，屬性選擇器。=全等，~=約等，^=開頭，$=結尾，*=含有，|=特別
二，偽類選擇器。（我們的對象是HTML標簽，就是冒號前面的標簽。）
1，動態偽類： a :likn a:visited a:hover a:active input:focus
2，狀(靜)態偽類： input:enable input:disable input:checked
3，結構偽類： div:nth-child(n)正數 div:nth-last-child(n)倒數 div:first-of-child(n) div:last-of-child(n)
div:nth-of-type(n)正數 div:nth-last-of-type(n)倒數 div:first-of-type div:last-of-type
div:empty空值 div:only-child唯一子元素 div:only-of-type唯一類型子元素 :not否定
4，偽元素： div::before div::after div::selection div::first-line div::first-letter （我們的對象不是冒號前面的標簽，而是冒號前面標簽里面的內容。不真正的HTML標簽）
權重：*0 > 標簽，偽類1 > 類，選擇器10 > id100 > 行內1000 此外還有一個：就近原則。
=================================
div.part1+.part4{background:#00f;} 只匹配.part1下面的第一個兄弟元素，且這個兄弟元素必須有.part4，否則其他的都不匹配。
<div class="part1">111</div>
<div class="part4">111</div> 匹配
<div class="part1123141 part4">111</div> 不匹配
相鄰兄弟選擇器，選中的是和它同一個父元素，並且要相鄰的元素，而且是它下面的那個相鄰的元素（一個元素）。
------------------------------
.one~.two{background:#00f} 只匹配.one下面含有.two的所有元素，.one上面的不匹配。
<div class="two">不匹配
<div class="one">
<div class="two three"> 匹配
<div class="three four > 不匹配
<div class="two five> 匹配
通用兄弟選擇器，選中的是和它同一個父元素，而且是指定的它下面所有兄弟元素
div[class="part1"]{background: #00f; } 全等，只匹配class="part1" 其他都不匹配
<div class="part1">111</div> 匹配
<div class="part1 part4">111</div> 不匹配
------------------------------
div[class~="part1"]{ background: #00f; } class的值一定是一個列表，其中含有單詞part1才匹配，否則不匹配。
<div class="part1"> 匹配
<div class=" two part1 three fore"> 匹配
<div class="ad-part1123141 two three part1123141"> 不匹配
Element[attribute~=value] 選擇器用於選取屬性值中包含指定詞匯的元素(一定是一個單獨的單詞)，只要是指定的屬性，並且屬性值列表中包含value，而不是在某個值中以value開頭或結尾。
此屬性值是一個詞列表，並且以空格隔開，其中詞列表中包含了一個value詞
------------------------------------
Element[attribute^="value"]匹配指定屬性的指定value值開頭的元素，如果class中有多個value值，第一個值中的第一個字母不是指定的值，即使后面的屬性中首字母是指定的值，那么也不能匹配上
div[class^="s"]{ background:red; }
<div class="one stwo"> 一行字</div> 第一個值的首字母是"o"，即使后面的值stwo的首字母是“s”，那么也匹配不上。
E[attr^="value"]：指定了屬性名，並且有屬性值，屬性值是以value開頭的
如下例子：
div[class^=“part”]
class="part two aside" 匹配
class="part123423" 匹配
其他都不匹配。
------------------------可以和上面的attribute^="value"合起來記憶------------------------
div[class$="part1"]
class=" two three part1" 匹配
class=" two three four_part1" 匹配
其他都不匹配
============================
div[class*="part1"] 只要含有part1都匹配，
class=" two three part1" 匹配
class=" two three part111111" 匹配
class=" part1-four three two" 匹配
class="two part1-four three" 匹配
其他都不配！！！
Elemrnt[attribute*="value"]匹配的是指定屬性、並且屬性值中包含value的都可以匹配到，只要有就都匹配，不管是否是單詞。
--------------------------------------
div[class|="part1"] 值為part1, 和 以part1- 的匹配
class="part1" 匹配 有其他值就不匹配 如：class="part1 one" 不匹配。
class="part1-part9 two three fore_" 匹配
其他不匹配。
Elemrnt[attribute|=”value”]匹配的是指定的屬性，並且屬性值是以“value-“開頭的元素，或者值就是value。
:link :visited :hover :active 在超鏈接中最常使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>屬性選擇器</title>
<style type="text/css">
input{
width: 300px;
height: 60px;
border: 2px solid #333;
}
input:hover{
border: 2px solid red;
}
input.one:focus{
background: orange;
}
input.two:focus{
background: yellow;
}
</style>
</head>
<body>
用戶名：<input type="text" class="one"><br/><br/>
密碼：<input type="password" class="two">
</body>
</html>
========================================
user interface 用戶界面的狀態偽類
:checked 選擇器匹配每個已被選中的 input 元素、只用於單選按鈕和復選框，目前主流的瀏覽器都能兼容。
----------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>屬性選擇器</title>
<style type="text/css">
input{ /*這里默認可以寫為：input:enabled{...} ,所以先設定好寬高，再禁用 */
width: 300px;
height: 60px;
}
.one:enabled{ /*默認可用的輸入框是可以設置寬高的*/
background: orange;
}
.two:disabled{ /*默認禁用的輸入框是不可以設置寬高的，但是可以在先前設定好寬高，再禁用*/
background: yellow;
}
.three:disabled{ /*默認禁用的輸入框是不可以設置寬高的，但是可以在先前設定好寬高，再禁用*/
background: black;
}
</style>
</head>
<body>
用戶名：<input type="text" class="one"><br/><br/>
用戶名：<input type="text" class="two" disabled="disabled" value="不可以輸入"><br/><br/>
用戶名：<input type="text" class="three" disabled="disabled" value="不可以輸入"><br/><br/>
密碼：<input type="password" class="four">
</body>
</html>
============================
================================================注意==========================================
以下所有CSS3的選擇器全部都是要相對於每個父元素而言的，
一定記得找每個父元素，每個父元素。
解釋：
div:first-child{...} 所有父元素中，第一個子元素是div，則匹配。如果第一個子元素不是div就不匹配。和 last-child剛剛好相反：
div:last-child{...} 所有父元素中，最后一個元素是div，則匹配，如果最后一個元素不是div就不匹配。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>屬性選擇器</title>
<style type="text/css">
div:first-child{ /*所有第一個div子元素進行改變*/
background: #f00;
border: 1px solid #000;
}
</style>
</head>
<body>
<div><!--相對body，這是第一個div元素，紅背景，1黑邊框--->
<div>1</div><!--相對其父元素，這是第一個div元素，紅背景，1黑邊框--->
<div>2</div><!--這是相對body第一個div元素里面的內容而已，-->
<div>3</div><!--這是相對body第一個div元素里面的內容而已，-->
</div>
<div>
<div>4</div><!--相對其父元素，這是第一個div元素，紅背景，1黑邊框--->
<div>5</div>
<div>6</div>
</div>
<div>
<div>7</div><!--相對其父元素，這是第一個div元素，紅背景，1黑邊框--->
<div>8</div>
<div>9</div>
</div>
</body>
</html>
顯示：
一般都會指定特定范圍內的第一個div如下：
.header > container > content > div:first-child{....}
=============================
解釋：
div:first-child{...} 所有父元素中，第一個子元素是div。如果第一個子元素不是div就不匹配。和 last-child剛剛好相反：
div:last-child{...} 所有父元素中，最后一個元素是div，如果最后一個元素不是div就不匹配。
--------------
div:nth-child(3){...} ：
說白了就是第（3）n個子元素是不是div，是就匹配，不是就不匹配。
div:nth-child(3){...} 所有父元素的第三個子元素是div（前面的兩個子元素不論類型，只要第三個子元素是div類型就匹配），才匹配。如果第三個子元素不是div ，那么不匹配。
這里是從第一個開始計算1.
一般都會指定具體路徑，不然很難控制。如：
.header > .nav > div:nth-child(3){...}
odd number 奇數 even number 偶數
2n even 偶數, 2n+1=1 odd 奇數, 3n-1 , 3n+1 , 4n-1 , 4n+1...等等，這里的n是從0開始的。
--------------
div:nth-last-child(3){...} ：
說白了就是倒數第（3）n個子元素是不是div，是就匹配，不是就不匹配。
div:nth-last-child(3){...} 所有父元素的倒數第三個子元素是div（前面的兩個子元素不論類型，只要第三個子元素是div類型就匹配），才匹配。如果倒數第三個子元素不是div ，那么不匹配。
這里是從最后一個開始計算。
一般都會指定具體路徑，不然很難控制。如：
.header > .nav > div:nth-last-child(3){...}
------------------
div:nth-of-type(3){ background: red;}
匹配：第三個div類型。
div:nth-of-type(3){ background: red;} 匹配所有父元素下面的第三個div（不是第三個子元素是不是div，而是所有div中的第三個div）。如果有第三個div則匹配第三個，如果沒有則不匹配。相反：
div:nth-last-of-type(3){ background: red;} 匹配所有父元素下面的倒數第三個div（不是第三個子元素是不是div，而是所有div中的第三個div）。如果有倒數第三個div則匹配倒數第三個，如果沒有則不匹配。
====================
div:nth-last-of-type(3){ background: red;}
匹配：倒數第三個div類型。
div:nth-last-of-type(3){ background: red;} 匹配所有父元素下面的倒數第三個div（不是第三個子元素是不是div，而是所有div中的第三個div）。如果有倒數第三個div則匹配倒數第三個，如果沒有則不匹配。
相反， div:nth-of-type(3){ background: red;} 匹配所有父元素下面的第三個div（不是第三個子元素是不是div，而是所有div中的第三個div）。如果有第三個div則匹配第三個，如果沒有則不匹配。
==================
first-of-type{ background: red;} 匹配所有父元素下面的第一個div（不是第一個子元素是不是div，而是所有div中的第一個div）。如果有一個div則匹配第一個，如果沒有div則不匹配。
這里的div不一定是要排在父元素下面的第一個子元素，只要存在該類型，且是第一個div就可以了，
-----------------------
last-of-type{ background: red;} 匹配所有父元素下面的倒數第一個div（不是倒數第一個子元素是不是div，而是所有div中的倒數第一個div）。如果有倒數第一個div則匹配倒數第一個，如果沒有div則不匹配。
這里的div不一定是要排在父元素下面的倒數第一個子元素，只要存在該類型，且是倒數第一個div就可以了，
---------------------------------
div:only-child{ ... } 如果父元素下面有且只有一個div子元素，則匹配。如果有兩個子元素，不匹配。存在唯一子元素，但不是div元素，則不匹配。
--------------------------------------------
div:only-child{ ... } 不管父元素下面有多少子元素，只要存在div元素是唯一的一個div就匹配。如果存在兩個div則不匹配。
------------------------------
--------------------
a:not(last-of-type){....} 最后一個a標簽不匹配。
a:not(first-of-type){....} 第一個a標簽不匹配。
a:not(nth-child(3)){....} 第三個a標簽不匹配。
div:not([class="one"]):not(.two):not(.four){color: red;} 除了.one .two .four 的div進行匹配
div:not(p){font-size: 50px;} 除了p的div進行匹配
p:not([name="one"]):not([name="three"]){background: #ff0;} 除了name="one" name="three"的p進行匹配。
:not(table) a 將依舊會應用在table內部的<a> 上, 因為 <tr>將會被 :not()這部分選擇器匹配。
:not([class="container"]) > span{font-size: 50px} 除了.container > span ，其他span都匹配。
not(section) span{。。。} 這樣寫所有的span都會匹配，所以錯誤。
:not(ul) li a {color: red;} 匹配所有 li 下面的子元素 a 標簽。
:not(ul)>li>a {color: red;} 除了ul>li>a 其他a標簽都匹配。注意。。。。
================================
========================================================
之所以叫偽元素，那是因為在開發者工具中是找不到被控制的元素對象（因為在偽元素中被控制的只是元素的內容，而不是元素對象。），只能在瀏覽器中看到效果。
而元素選擇器則不一樣，它是可在開發者工具中找到被控制的元素對象。（元素選擇器中，被控制的是整個元素對象）
總共有五個偽元素：
Element::first-line 控制塊級元素的第一行。
Element::first-letter 控制塊級元素的第個字母/漢子。
Element::before 在指定元素的內容之前添加內容，是該元素的第一個子元素。
Element::after 在指定元素的內容之后添加內容，是該元素的最后一個子元素。
’
-------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽元素</title>
<style type="text/css">
div::before{
content: "我愛你你愛我嗎？";
font-size: 20px;
color: red;
display: block;
background: #abcdef;
}
</style>
</head>
<body>
<div>偽元素</div>
</body>
</html>
::before 偽元素：
1，第一個子元素。
2，默認是行級元素，可以進行所有的CSS樣式設置
3，內容是通過content屬性來添加的。
4，在開發者工具中是找不到對應的標簽的。
5，在頁面顯示中內容是無法被選中的。
顯示如下：
div::selection{
color: red;
background: #ff0;
}
使用鼠標選中時，改變其CSS樣式，如下顯示：
=====================================
