3.CSS語法與選擇器

阿新 • • 發佈：2022-03-20

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;
}