什麼是選擇器：
每一條css樣式定義由兩部分組成，形式以下：css
[code] 選擇器{
樣式;
}
[/code] 在{}以前的部分就是「選擇器」， 「選擇器」指明瞭{}中的「樣式」的做用對象，也就是「樣式」做用於網頁中的哪些元素。前端
基礎選擇器
- 標籤選擇器（選擇標籤名）：一個完整的HTML頁面是有不少不一樣的標籤組成，而 標籤選擇器，則是決定哪些標籤，採用相應的CSS樣式； 如：
p{
color:#900;
font-size:12px;
background:#090;
}
- ID選擇器（#號+ID名）：ID 選擇器能夠爲標有特定 ID 的 HTML 元素指定特定的樣式。 根據元素ID來選擇元素，具備惟一性，這意味着同一id在同一文檔頁面中只能出現一次；
如：web
#demoDiv{
color:#FF0000;
}
- 類選擇器（.+class名）：類選擇器根據類名來選擇,前面以」.」來標誌；
如：面試
.demoDiv{
color:blue;
}
- 通用選擇器（選擇所有元素）：通用選擇器用*來表示； 如：
* {
color:green;
font-size: 12px;
}
- 羣組選擇器：當幾個元素樣式屬性同樣時，能夠共同調用一個聲明，元素之間用逗號分隔； 如：
p,h1,span{
color:red;
line-height:20px;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
使用羣組選擇器，將會大大的簡化CSS代碼，將具備多個相同屬性的元素，合併羣組進行選擇，定義一樣的CSS屬性，這大大的提升了編碼效率，同時也減小了CSS文件的體積。ide
層次選擇器
- 子選擇器 (元素之間用>分割)：子選擇器（child selector）是指它的直接後代，能夠理解爲做用於子元素的第一個後代; 如：
p>span{
color:red;
}
- 後代選擇器（元素之間用空格分隔)：用來選擇特定元素或元素組的後代，將對父元素的選擇放在前面，對子元素的選擇放在後面，中間加一個空格分開 如：
section span{
color:blue;
}
子選擇器與後代選擇器的區別： 1）子選擇器（child selector）僅是指它的直接後代，然後代選擇器是做用於全部子後代元素； 2）子選擇器是經過「>」進行選擇，然後代選擇器經過空格來進行選擇；學習
- 兄弟選擇器（元素之間用+分隔):除了上面的子選擇器與後代選擇器，咱們可能還但願找到兄弟兩個當中的一個，如一個標題h1元素後面緊跟了兩個段落p元素，咱們想定位第一個段落p元素，對它應用樣式。咱們就可使用相鄰同胞選擇器; 如：
h1 + p {
color:blue;
}
僞類選擇器
僞類能夠應用在連接標籤中，也能夠應用在一些表單元素中，但表單元素的應用IE不支持，因此通常僞類都只會被應用在連接的樣式上。編碼
-
動態僞類選擇器 動態僞選擇器的書寫順序： 1）link和visited必須放在最前面（無前後順序,靜態僞類選擇器）； 2）link和visited只能用於a標籤； 3）link和visited後面是focus 4）focus後面是hover； 5）hover後面是active；spa
-
結構僞類選擇器 first-child：第一個元素。 last-child：最後一個元素。 nth-child(n)：某一個元素 想選擇第幾個，n就取值多少。 nth-child(-n+m)：選中前m個元素 n起始值是0。 nth-of-type(n)：選中第n個元素。 nth-last-child(n)：選中倒數第n個元素.code
-
否認僞類選擇器 元素名：not（n）除了某個元素，其它元素添加樣式orm
僞元素選擇器：
全部僞元素選擇器都必須放在出現該僞元素的選擇器的最後面，也就是說僞元素選擇器不能跟任何派生選擇器；
- :first-letter，設置塊元素首字母樣式，行內元素轉換成塊元素和行內塊元素也支持；
div p:first-letter {
font-size: 20px
}
//選擇div元素裏全部的p元素的第一個字母或漢字;
- :first-line：設置第一個文本行樣式；
.box .main:first-line {
color: #f00
}
//只有部分屬性容許first-line：全部font屬性、color、全部background屬性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height
- :before：設置以前的樣式，能夠插入生成的內容，並設置其樣式；
body:before {
content: 'The Start:';
display: block;
}
//在body元素前插入文本內容'The Start:'，並設置其爲塊元素
- :after：設置以後的樣式，能夠插入生成的內容，並設置其樣式； 例：
body:after {
content: 'The End.';
display: block;
}
//在body元素最後插入文本內容'The End.'，並設置其爲塊元素
- input::-webkit-input-placeholder（修改輸入框提示信息樣式）
屬性選擇器
是根據元素的屬性來匹配的，其屬性能夠是標準屬性也能夠是自定義屬性；也能夠同時匹配多個屬性；
- 格式：元素名稱[屬性名+「屬性值」]
input[type=「text」]
- 格式： 元素名[屬性名^=屬性值開頭的內容] 選中以XXX開頭的元素
input[type^=「te」]+span{
color:red;
}
- 格式： 元素名[屬性名 $ =屬性值結尾的內容] 選中以XXX結尾的元素
input[type $ =「d」]+span{
color:blue;
}
- 格式： 元素名[屬性名* =屬性值包含的內容] 選中包含XXX的元素
input[type*=「i」]+span{
color:green;
}
結語：想學習web前端的朋友，和須要前端資料的朋友均可以加入這邊的學習裙，前面：953，中間：352，最後：883，裙裏從小白到大佬都有，還有前端學習資料，前端面試題PDF文檔，免費分享，不見不散哦！