CSS 語法與選擇器
1. CSS 簡介
層疊樣式表
網頁實際上是一個多層的結構，通過 CSS 可以分別為網頁的每一個層來設置樣式，而最終我們能看到只是網頁的最上邊一層
總之一句話，CSS 用來設置網頁中元素的樣式
使用 CSS 來修改元素樣式的方式大致可以分為 3 種
內聯樣式（行內樣式）
在標簽內部通過style屬性來設置元素的樣式
<p style="color:red;font-size:60px;">內聯樣式（行內樣式）</p>
問題：使用內聯樣式，樣式只能對一個標簽生效。如果希望影響到多個元素，必須在每一個元素中都復制一遍；並且當樣式發生變化時，我們必須要一個一個的修改，非常的不方便。（注意：開發時絕對不要使用內聯樣式）
內部樣式表
將樣式編寫到head中的style標簽里然后通過 css 的選擇器來選中元素並為其設置各種樣式可以同時為多個標簽設置樣式，並且修改時只需要修改一處即可。內部樣式表更加方便對樣式進行復用
<style>
p{
color:green;
font-size:50px;
}
</style>
問題：我們的內部樣式表只能對一個網頁起作用，它里邊的樣式不能跨頁面進行復用
外部樣式表
可以將 css 樣式編寫到一個外部的 CSS 文件中，然后通過link標簽來引入外部的 CSS 文件
<link rel="stylesheet" href="./style.css" />
外部樣式表需要通過link標簽進行引入，意味着只要想使用這些樣式的網頁都可以對其進行引用使樣式，可以在不同頁面之間進行復用
將樣式編寫到外部的 CSS 文件中，可以使用到瀏覽器的緩存機制，從而加快網頁的加載速度，提高用戶的體驗。
2. CSS 基本語法
注釋
css 中的注釋
只能使用/*和*/包裹。即不管是單行注釋，還是多行注釋，都是以/*開頭，以*/結尾
/* css中的單行注釋 */
/*
css中的多行注釋
css中的多行注釋
css中的多行注釋
*/
我們對比下其他幾種前端語言的注釋
html 中的注釋
只能使用<!--和-->包裹。即不管是單行注釋，還是多行注釋，都是以<!--開頭，以-->結尾
<!-- html中的單行注釋 -->
<!--
html中的多行注釋
html中的多行注釋
html中的多行注釋
-->
JS(JavaScript)和 JQuery 中的注釋
單行注釋使用//。多行注釋使用/*和*/包裹，以<!--開頭，以-->結尾
/* JS(JavaScript)和JQuery中的單行注釋*/
/*
JS(JavaScript)和JQuery中的多行注釋
JS(JavaScript)和JQuery中的多行注釋
JS(JavaScript)和JQuery中的多行注釋
*/
基本語法
選擇器 聲明塊
選擇器
通過選擇器可以選中頁面中的指定元素
- 比如
p的作用就是選中頁面中所有的p元素聲明塊
聲明塊
通過聲明塊來指定要為元素設置的樣式
-
聲明塊由一個一個的聲明組成，聲明是一個名值對結構
-
一個樣式名對應一個樣式值，名和值之間以
:連接，以;結尾
h1 {
color: green;
}
3. CSS 選擇器
通配選擇器（Universal selector）
- 作用：選中頁面中的所有元素
- 語法：
* - 例子：
*{}
* {
color: red;
}
元素選擇器（Type selector）
也叫類型選擇器、標簽選擇器
- 作用：根據標簽名來選中指定的元素
- 語法：
elementname{} - 例子：
p{}h1{}div{}
p {
color: red;
}
h1 {
color: green;
}
類選擇器（Class selector）
- 作用：根據元素的 class 屬性值選中一組元素
- 語法：
.classname - 例子：
.blue{}
.blue {
color: blue;
}
.size {
font-size: 20px;
}
class是一個標簽的屬性，它和id類似，不同的是class
- 可以重復使用，
- 可以通過
class屬性來為元素分組， - 可以同時為一個元素指定多個
class屬性
<p class="blue size">類選擇器（Class selector）</p>
ID 選擇器（ID selector）
- 作用：根據元素的
id屬性值選中一個元素 - 語法：
#idname{} - 例子：
#box{}#red{}
#red {
color: red;
}
屬性選擇器（Attribute selector）
- 作用：根據元素的屬性值選中一組元素
- 語法 1：
[屬性名]選擇含有指定屬性的元素 - 語法 2：
[屬性名=屬性值]選擇含有指定屬性和屬性值的元素 - 語法 3：
[屬性名^=屬性值]選擇屬性值以指定值開頭的元素 - 語法 4：
[屬性名$=屬性值]選擇屬性值以指定值結尾的元素 - 語法 5：
[屬性名*=屬性值]選擇屬性值中含有某值的元素 - 例子：
p[title]{}p[title=e]{}p[title^=e]{}p[title$=e]{}p[title*=e]{}
p[title] {
color: orange;
}
p[title="e"] {
color: orange;
}
p[title^="e"] {
color: orange;
}
p[title$="e"] {
color: orange;
}
p[title*="e"] {
color: orange;
}
4. 復合選擇器
交集選擇器
- 作用：選中同時復合多個條件的元素
- 語法：
選擇器1選擇器2選擇器3選擇器n{} - 注意點：交集選擇器中如果有元素選擇器，必須使用元素選擇器開頭
div.red {
font-size: 30px;
}
.a.b.c {
color: blue;
}
並集選擇器（選擇器分組）
- 作用：同時選擇多個選擇器對應的元素
- 語法：
選擇器1,選擇器2,選擇器3,選擇器n{} - 例子：
#b1,.p1,h1,span,div.red{}
h1,
span {
color: green;
}
5. 關系選擇器
- 父元素：直接包含子元素的元素叫做父元素
- 子元素：直接被父元素包含的元素是子元素
- 祖先元素：直接或間接包含后代元素的元素叫做祖先元素；一個元素的父元素也是它的祖先元素
- 后代元素：直接或間接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
- 兄弟元素：擁有相同父元素的元素是兄弟元素
子元素選擇器（Child combinator）
- 作用：選中指定父元素的指定子元素
- 語法：
父元素 > 子元素 - 例子：
A > B
div.box > p > span {
color: orange;
}
后代元素選擇器（Descendant combinator）
- 作用：選中指定元素內的指定后代元素
- 語法：
祖先 后代 - 例子：
A B
div span {
color: skyblue;
}
兄弟元素選擇器（Sibling combinator）
- 作用：選擇下一個兄弟
- 語法：
前一個 + 下一個前一個 + 下一組 - 例子 1：
A1 + A2（Adjacent sibling combinator） - 例子 2：
A1 ~ An（General sibling combinator）
p + span {
color: red;
}
p ~ span {
color: red;
}
6. 偽類選擇器
偽類（不存在的類，特殊的類）
偽類用來描述一個元素的特殊狀態，比如：第一個子元素、被點擊的元素、鼠標移入的元素.…
偽類一般情況下都是使用:開頭
:first-child第一個子元素:last-child最后一個子元素:nth-child()選中第 n 個子元素- n：第 n 個，n 的范圍 0 到正無窮
- 2n 或 even：選中偶數位的元素
- 2n+1 或 odd：選中奇數位的元素
以上這些偽類都是根據所有的子元素進行排序的
:first-of-type同類型中的第一個子元素:last-of-type同類型中的最后一個子元素:nth-of-type()選中同類型中的第 n 個子元素
這幾個偽類的功能和上述的類似，不同點是他們是在同類型元素中進行排序的
:not()否定偽類，將符合條件的元素從選擇器中去除
/* ul下所有li，黑色 */
ul > li {
color: black;
}
/* ul下第偶數個li，黃色 */
ul > li:nth-child(2n) {
color: yellow;
}
/* ul下第奇數個li，綠色 */
ul > li:nth-child(odd) {
color: green;
}
/* ul下第一個li，紅色 */
ul > li:first-child {
color: red;
}
/* ul下最后一個li，黃色 */
ul > li:last-child {
color: orange;
}
:link未訪問的鏈接:visited已訪問的鏈接- 由於隱私的原因，所以
visited這個偽類只能修改鏈接的顏色
- 由於隱私的原因，所以
:hover鼠標懸停的鏈接:active鼠標點擊的鏈接
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: yellow;
}
/* mouse over link */
a:hover {
color: green;
}
/* selected link */
a:active {
color: blue;
}
7. 偽元素選擇器
偽元素，表示頁面中一些特殊的並不真實的存在的元素（特殊的位置）
偽元素使用::開頭
::first-letter表示第一個字母::first-line表示第一行::selection表示選中的內容::before元素的開始::after元素的最后::before和::after必須結合content屬性來使用
/* 段落首字母設置大小為30px */
p::first-letter {
font-size: 30px;
}
/* 段落第一行設置為黃色背景 */
p::first-line {
background-color: yellow;
}
/* 段落選中的部分變綠色 */
p::selection {
background-color: green；;
}
/* div前加上內容 */
div::before {
content: "BEFORE";
color: red;
}
/* div后加上內容 */
div::after {
content: "AFTER";
color: blue;
}
8. CSS Dinner 游戲
官方地址：CSS Diner - Where we feast on CSS Selectors!
CSS Dinner 是一個幫助初學者快速熟悉 css 各種選擇器的網頁游戲
