前言：本篇主要學習CSS中的選擇器，包括CSS及CSS3中的，作為自己的學習總結。
第一部分：CSS初識
1.何為CSS？有什么作用？
CSS(Cascading Style Sheets):通常稱為層疊樣式表。
作用：主要負責HTML元素樣式添加及頁面的布局，是結構和樣式分離，從而達到美化頁面的目的。
2.CSS基本書寫規則
使用CSS時，需要遵從一定的規范。具體解釋如下：
h1 { color: red; font-size: 25px; }
1>.選擇器用於指定CSS樣式作用的HTML對象，花括號內設置具體樣式。
2>.屬性和屬性值以“鍵值對”的形式出現，之間用英文“:”連接。
3>.多個屬性之間用英文分號“;”隔開。
3.HTML中如何引入CSS?
行內式：在元素標簽中嵌入style樣式。
<h1 style="color: red; font-size: 25px">Status:</h1>
內嵌式：在head中嵌入。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> h1 { color: red; font-size: 25px; } </style> </head>
外鏈式：在head標簽中通過link標簽引入。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
</head>
注意三者優先級：行內式>內嵌式>外鏈式
第二部分：CSS選擇器
選擇器：將CSS樣式應用於特定的HTML元素，首先需要找到目標元素。將實現這種功能的部分稱為選擇器。
1.標簽選擇器
使用標簽名作為選擇器，選中指定標簽名的元素，為其設置樣式。
1>任意標簽都可當做選擇器
2>所有名稱相同的標簽都會被選中。
<style type="text/css"> /* 選中所有p標簽，設置顏色為綠色，字體為12px。 */ p { color: green; font-size: 12px; } </style>
2.類選擇器 -- "."
類選擇器使用"."進行標識，后面緊跟類名。
所謂類就是元素的class屬性，任何元素都可以有class屬性，且class是可以重復的。
<p class="green">CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表）</p> <p>CSS以HTML為基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等</p>
/* 使用類選擇器為p元素設置不同的樣式*/ .green { color: green; } .red { color: red }
3.id選擇器 -- "#"
id選擇器用"#"進行標識，后面緊跟id名。
任何標簽都可以有id屬性，命名以字母開頭，可以包含數字、下划線，區分大小寫。
注意：W3C規定，同一個頁面id名不能重復。
<!-- 添加了兩個id不一樣的p元素 --> <p id="one">id選擇器使用“#”進行標識，后面緊跟id名，其基本語法格式如下</p> <p id="last">id選擇器使用“#”進行標識，后面緊跟id名，其基本語法格式如下</p>
<style type="text/css"> /* 通過id名分別為兩個p元素設置樣式 */ #one { color: red; } #last { color: pink; } </style>
4.通配符選擇器 -- "*"
通配符選擇器用"*"表示，匹配頁面中所有的元素，實際中很少用到。
<p>id選擇器使用“#”進行標識，后面緊跟id名，其基本語法格式如下</p> <p>id選擇器使用“#”進行標識，后面緊跟id名，其基本語法格式如下</p>
<style type="text/css"> /* 通過*選中頁面上的兩個p元素 */ * { color: pink; } </style>
5.后代選擇器
選擇器之間使用空格隔開的復合選擇器就是后代選擇器。
<!-- div1的后代中包括兩個p元素 --> <div id="div1"> <p>div1中的后代元素</p> <ul> <li><p>div1中的后代元素</p></li> </ul> </div>
/* 使用后代選擇器，選中div1中所有的p元素 */ #div1 p { color: pink; }
6.交集選擇器
選擇器之間無任何修飾符的復合選擇器就是交集選擇器，比如p.p1，表示選中類名為p1的p元素。
<p id="p1">div1中的后代元素</p> <ul> <li> <p>div1中的后代元素</p> </li> </ul>
<style type="text/css"> /* 使用交集選擇器，只選中id為p1的p標簽 */ p#p1 { color: red; } </style>
7.並集選擇器
選擇器之間使用"，"連接的復合選擇器就是並集選擇器，比如選擇器".p1, .p2"，同時為p1和p2設置樣式。
<!-- 為p元素設置p1和p2的類名 --> <p class="p1">div1中的后代元素</p> <ul> <li> <p class="p2">div1中的后代元素</p> </li> </ul>
<style type="text/css"> /* 使用並集選擇器，為兩個p元素設置樣式 */ .p1,.p2 { color: red; } </style>
8.子選擇器
選擇器之間使用">"連接的復合選擇器就是子選擇器，比如：div>p，選中了div中的子選擇器。
<div> <!-- 此處p屬於div的子選擇器 --> <p class="p1">div1中的后代元素</p> <ul> <li> <!-- 此處p屬於li的子選擇器，div的后代選擇器 --> <p class="p2">div1中的后代元素</p> </li> </ul> </div>
<style type="text/css"> /* div中的兒子元素p會被設置成紅色 */ div>p { color: red; } </style>
9.兄弟選擇器
選擇器之間使用"+"連接的復合選擇器就是兄弟選擇器，比如：.p1+p，選中類名為p1的p元素緊挨着的下一個兄弟元素。
<div> <p>選擇器中的兄弟元素</p> <p class="p1">選擇器中的兄弟元素</p> <!-- p1緊挨着的兄弟元素 --> <p>選擇器中的兄弟元素</p> <p>選擇器中的兄弟元素</p> <p>選擇器中的兄弟元素</p> </div>
/* .p1中緊挨着的下一個兄弟元素被選中設置 */ .p1+p { color: red; }
10.屬性選擇器
通過元素的屬性，獲取相應的元素並為其設置樣式的選擇器。
1>.[attribute]，根據屬性名選擇元素。
<p name='attr'>屬性選擇器測試屬性名</p> <p name='attr1'>屬性選擇器測試p元素</p> <p name='attr2'>屬性選擇器測試p元素</p>
/* 會選中所有有name屬性的元素 */ p[name] { color: red; }
2>.[attribute=value]，選中屬性值為value的元素。
<p name='attr'>屬性選擇器測試屬性名</p> <p name='attr1'>屬性選擇器測試p元素</p> <p name='attr2'>屬性選擇器測試p元素</p>
/* 有name屬性，且值為attr的p元素會被選中 */ p[name='attr'] { color: red; }
3>.[attribute^=value]，屬性值以value開頭的元素會被選中。(CSS3)
<p name='attr'>屬性選擇器測試屬性名</p> <p name='name1'>屬性選擇器測試p元素</p> <p name='p2'>屬性選擇器測試p元素</p>
/* 有屬性name，且值以p開頭的p元素會被選中 */ p[name^='p'] { color: red; }
4>.[attribute$=value]，屬性值以value結尾的元素會被選中。(CSS3)
<p name='attr'>屬性選擇器測試屬性名</p> <p name='p'>屬性選擇器測試p元素</p> <p name='p2'>屬性選擇器測試p元素</p>
/* 有屬性name，且值以p結尾的p元素會被選中 */ p[name$='p'] { color: red; }
5>.[attribute*=value]，屬性值中包含value的元素會被選中。(CSS3)
<p name='attr'>屬性選擇器測試屬性名</p> <p name='p'>屬性選擇器測試p元素</p> <p name='p2'>屬性選擇器測試p元素</p>
/* 有屬性name，且值中包含p的p元素會被選中 */ p[name*='p'] { color: red; }
11.偽類選擇器
偽類：用於向某些選擇器添加特殊的效果，作用和元素中的類相同。
如果我們想為元素的某些特殊狀態設置樣式，我們無法通過具體的class設置，比如a標簽懸浮狀態樣式設置，我們可以用a:hover實現，它實現了和類相同的功能，但同時又不是真正的類，所以稱其為偽類。
1>錨偽類
a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */ a:active {color: #0000FF} /* 選定的鏈接 */
注意：1.a:hover 必須被置於 a:link 和 a:visited 之后，才會有效。2.a:active 必須被置於 a:hover 之后，才會有效。
2>序選擇器(與順序相關) --> (CSS3)
第一類：選擇子元素中的第一個或最后一個
注意： 帶type和不帶有type的區別
1>不帶type表示選中E的父元素中的第一個元素且其必須是E類型，否則不選中(強調第一個)
2>帶type表示選中E的父元素中的第一次出現的E元素，否則不選中(強調第一次)
<ul> <span>test</span> <li>籃球</li> <li>足球</li> <li>羽毛球</li> <li>乒乓球</li> </ul>
/* li父元素ul的第一個元素不是li而是span，所以無法選中 */ li:first-child { color: green; } /* 選中li父元素ul中的最后一個li元素 */ li:last-child { color: green; } /* 選中li父元素ul中第一次出現的li，而非第一個 */ li:first-of-type { color: red; } /* 選中li父元素ul中最后一次出現的li，而非最后一個 */ li:last-of-type { color: red; }
注意： 帶type和不帶有type的區別
1>不帶type表示從E的父元素中的第一個元素索引開始計算。
2>type表相當於先將E的父元素中所有類型為E的子元素挑出來，重新計算索引。
<div> <ul class="u1"> <span>test</span> <li>籃球</li> <li>足球</li> </ul> <ul class="u2"> <li>籃球</li> <span>test</span> <li>足球</li> </ul> </div>
/* li父元素ul中索引為2且為li的元素會被選中(選擇器索引從1開始)，如果不是li元素則不會被選中 */ li:nth-child(2) { color: red; }
<div> <ul class="u1"> <span>索引為1奇數，但不是li元素</span> <li>索引為2偶數，是li元素</li> <li>索引為3奇數，是li元素</li> <li>索引為4偶數，是li元素</li> </ul> </div>
li:nth-child(odd) { color: red; } li:nth-child(even) { color: yellow; }
<div> <ul class="u1"> <span>索引為1奇數，但不是li元素</span> <li>索引為2偶數，是li元素</li> <li>索引為3奇數，是li元素</li> <li>索引為4偶數，是li元素</li> </ul> </div>
/* n的取值0到li元素的長度個數，當-n+2表達式結果為0不再繼續計算 */ li:nth-of-type(-n + 2){ color: red; } li:nth-last-of-type(-n + 2){ color: red; }
E:nth-of-type(even) 作用相當於先把E元素過濾出來，然后選中所有的索引值為偶數的E元素。用法雷同不再舉例
E:nth-of-type(odd)同E:nth-of-type(even)的用法相同。
12.偽元素選擇器
偽元素：是HTML 中並不存在的元素，用於將特殊的效果添加到某些選擇器。
CSS3中對偽元素的描述：
偽元素的由兩個冒號::開頭，然后是偽元素的名稱 。
使用兩個冒號::是為了區別偽類和偽元素（CSS2中並沒有區別）。當然，考慮到兼容性，CSS2中已存的偽元素仍然可以使用一個冒號:的語法，但是CSS3中新增的偽元素必須使用兩個冒號::
一個選擇器只能使用一個偽元素，並且偽元素必須處於選擇器語句的最后。
如何區分偽類和偽元素？
作用都是用於將特殊的效果添加到某些選擇器，但是偽元素會在最后的結構上生成
偽元素選擇器：
:first-letter，選中文本中的第一個字母
:first-line，選中文本中的第一行
<div> <p class="p1">These are the necessary steps:</p> <p class="p3"> These are the necessary steps<br/> These are the necessary steps: These are the necessary steps: </p> </div>
/* 類名為p1的p元素內容中的第一個字母會被選中加粗 */ p.p1:first-letter { font-weight: bold; } /* 類名為p3的p元素內容中的第一行會被選中加粗 */ p.p3:first-line { font-weight: bold; }
CSS3偽元素選擇器：
::after，在元素的前面添加內容
::before，在元素的后面添加內容
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> p::before { content: "p元素之前內容"; color: red; } p::after { content: "p元素之后內容"; color: yellow; } </style> </head> <body> <div> <p>測試偽元素</p> </div> </body>
最后生成的結構：
總結：本篇總結了自己學習過程中遇到的CSS選擇器，通過總結又回顧了一次，加深了自己的理解，這里並沒有列舉完所有的選擇器，大家可以一起學習完善。