商河 網(wǎng)站建設(shè)域名在線查詢(xún)
1. 作用
- 匹配文檔中的某些元素為其應(yīng)用樣式。
- 根據(jù)不同需求把不同的標(biāo)簽選出來(lái)。
2. 分類(lèi)
- 分類(lèi)
- 基礎(chǔ)選擇器
- 包含 標(biāo)簽選擇器、ID選擇器、類(lèi)選擇器、通用選擇器等
- 復(fù)合選擇器
- 包含 后代選擇器、子代選擇器、偽類(lèi)選擇器等
- 包含 后代選擇器、子代選擇器、偽類(lèi)選擇器等
- 基礎(chǔ)選擇器
1 標(biāo)簽選擇器
-
介紹
- 又稱(chēng)為元素選擇器，根據(jù)標(biāo)簽名匹配文檔中所有該元素，為頁(yè)面中某一類(lèi)標(biāo)簽指定統(tǒng)一的CSS樣式。
-
語(yǔ)法
標(biāo)簽名{屬性1: 屬性值1;屬性2: 屬性值2;... }
-
示例
-
說(shuō)明
- 選擇器：指需設(shè)置樣式的 HTML 元素。
- 聲明塊包含一條或多條用分號(hào)分隔的聲明。
- 每條聲明都包含一個(gè) CSS 屬性名稱(chēng)和一個(gè)值，以冒號(hào)分隔。
- 多條 CSS 聲明用分號(hào)分隔，聲明塊用花括號(hào)括起來(lái)。
-
優(yōu)點(diǎn)
- 能快速為頁(yè)面中同類(lèi)型的標(biāo)簽統(tǒng)一設(shè)置樣式。
-
缺點(diǎn)
- 不能設(shè)計(jì)差異化樣式，只能選擇全部的當(dāng)前標(biāo)簽。
2 ID選擇器
-
介紹
- 根據(jù)元素的 id 屬性值匹配文檔中唯一的元素，id具有唯一性，不能重復(fù)使用。
- 在 CSS 中 ID選擇器以 # 來(lái)定義
-
語(yǔ)法
#id屬性值{屬性1: 屬性值1;屬性2: 屬性值2;...} -
示例
-
注意
- id屬性值自定義，可以由數(shù)字、字母、下劃線、- 組成，不能以數(shù)字開(kāi)頭;
- 盡量見(jiàn)名知意，多個(gè)單詞組成時(shí)，可以使用連接符，下劃線，小駝峰表示。
-
口訣
- 樣式#定義，結(jié)構(gòu)id調(diào)用，只能調(diào)用一次
- 樣式#定義，結(jié)構(gòu)id調(diào)用，只能調(diào)用一次
3 類(lèi)選擇器
-
介紹
-
想要差異化選擇不同的標(biāo)簽，單獨(dú)選一個(gè)或者某幾個(gè)標(biāo)簽，可以使用類(lèi)選擇器。
- 根據(jù)元素的class屬性值匹配相應(yīng)的元素，class屬性值可以重復(fù)使用，實(shí)現(xiàn)樣式的復(fù)用（簡(jiǎn)言之：用于查找或選取要設(shè)置樣式的 HTML元素）
-
語(yǔ)法
.類(lèi)名 {屬性1: 屬性值1;屬性2: 屬性值2;... } -
示例
-
說(shuō)明
- 長(zhǎng)名稱(chēng)或詞組可以使用中橫線來(lái)為選擇器命名。
- 不要使用純數(shù)字、中文等命名，盡量使用英文字母來(lái)表示。
- 命名要有意義，盡量使別人一眼就知道這個(gè)類(lèi)名的目的。
-
口訣
- 樣式點(diǎn)定義，結(jié)構(gòu)類(lèi)調(diào)用
-
特殊用法
-
類(lèi)選擇器與其他選擇器結(jié)合使用
a.c1{ }- 注意：標(biāo)簽與類(lèi)選擇器結(jié)合時(shí)，標(biāo)簽在前，類(lèi)選擇器在后
-
class屬性值可以寫(xiě)多個(gè)（多個(gè)類(lèi)名之間必必須用 空格 分開(kāi)），共同應(yīng)用類(lèi)選擇器的樣式
<p class="c1 c2"></p>
-
-
示例
4 通用選擇器
-
介紹
- 通配符選擇器使用 * 定義，它表示選取頁(yè)面中所有元素（標(biāo)簽）。
-
語(yǔ)法
* {屬性1: 屬性值1;屬性2: 屬性值2;... } -
說(shuō)明
-
通常在最開(kāi)始對(duì)頁(yè)面設(shè)置內(nèi)邊距與外邊距的設(shè)置（默認(rèn)body與頁(yè)面會(huì)存在邊距）。
*{padding: 0;margin: 0; }
-
-
示例
5 群組選擇器
-
介紹
- 也稱(chēng)為并集選擇器，可以使用多個(gè)不同的選擇器為一組元素統(tǒng)一設(shè)置樣式。
-
語(yǔ)法
selector1,selector2,selector3{ 屬性1: 屬性值1;屬性2: 屬性值2;... } -
示例
6 后代選擇器
-
介紹
- 匹配滿(mǎn)足選擇器的所有后代元素(包含直接子元素和間接子元素)
-
語(yǔ)法
selector1 selector2{屬性1： 屬性值1;屬性2： 屬性值2;... } -
說(shuō)明
- 匹配selector1中所有滿(mǎn)足selector2的后代元素
- selector1 與 selector2 可以是任意的基礎(chǔ)選擇器
-
示例
7 子代選擇器
-
介紹
- 匹配滿(mǎn)足選擇器的所有直接子元素，只能選擇作為某元素的最近一級(jí)子元素
-
語(yǔ)法
selector1>selector2{屬性1： 屬性值1;屬性2: 屬性值2;... } -
說(shuō)明
- selector2 必須是 selector1 的親子元素
-
示例
8 偽類(lèi)選擇器
-
介紹
- 為元素的不同狀態(tài)分別設(shè)置樣式，必須與基礎(chǔ)選擇器結(jié)合使用。
-
特點(diǎn)
用冒號(hào)（:）表示，如：:hover、:first-child、:last_child
1、鏈接偽類(lèi)選擇器
-
分類(lèi)
:link 超鏈接訪問(wèn)前的狀態(tài) :visited 超鏈接訪問(wèn)后的狀態(tài) :hover 鼠標(biāo)滑過(guò)時(shí)的狀態(tài) :active 鼠標(biāo)點(diǎn)按不抬起時(shí)的狀態(tài)(激活) -
示例
-
注意
-
超鏈接如果需要為四種狀態(tài)分別設(shè)置樣式，則按照以下順序【LVHA】聲明
:link :visited :hover :active -
超鏈接常用設(shè)置 :
a{/*統(tǒng)一設(shè)置超鏈接默認(rèn)樣式(不分狀態(tài))*/ }a:hover{/*鼠標(biāo)滑過(guò)時(shí)改樣式*/ }
-
2、焦點(diǎn)偽類(lèi)選擇器
-
:focus
- 用于選取獲得焦點(diǎn)的表單元素。
- 一般情況 <input> 類(lèi)表單元素才能獲取
-
示例
3、結(jié)構(gòu)偽類(lèi)選擇器
-
作用
- 根據(jù)元素的
結(jié)構(gòu)關(guān)系查找元素
- 根據(jù)元素的
-
選擇器
選擇器 說(shuō)明 E:first-child 查找第1個(gè)E元素 E:last-child 查找最后一個(gè)E元素 E:nth-child(N) 查找第N個(gè)E元素（第1個(gè)元素N值為1） -
:nth-child(公式)
-
作用：根據(jù)元素的關(guān)系結(jié)構(gòu)
查找多個(gè)元素。公式 功能 2n 偶數(shù)標(biāo)簽 2n+1； 2n-1 奇數(shù)標(biāo)簽 5n 找到5的倍數(shù)的標(biāo)簽 n+5 找到第5個(gè)以后的標(biāo)簽 -n+5 找到第5個(gè)以前的標(biāo)簽
-
-
示例
4、偽元素選擇器
-
作用
- 創(chuàng)建
虛擬元素（偽元素），用來(lái)擺放裝飾性的內(nèi)容
- 創(chuàng)建
-
選擇器
選擇器 說(shuō)明 E::before 在E元素里面最前面添加一個(gè)偽元素 E::after 在E元素里面最后面添加一個(gè)偽元素 -
注意
- 必須設(shè)置 content: “” 屬性，用來(lái)設(shè)置
偽元素的內(nèi)容，如果無(wú)內(nèi)容，則引號(hào)留白即可 - 微元素必須是
行內(nèi)顯示模式 權(quán)重和標(biāo)簽選擇器相同。
- 必須設(shè)置 content: “” 屬性，用來(lái)設(shè)置
-
應(yīng)用場(chǎng)景
- 插入內(nèi)容?：使用::before和::after偽元素在元素的前后插入內(nèi)容，如在段落前添加引用符號(hào)、圖標(biāo)裝飾等?
- 分割符號(hào)?：使用::before和::after偽元素在列表項(xiàng)之間添加分割線或其他符號(hào)，提高列表的可讀性?
- 清除浮動(dòng)?：使用::after偽元素來(lái)清除浮動(dòng)，保證容器正確包裹元素?
- 首行縮進(jìn)?：使用::first-line偽元素來(lái)設(shè)置元素內(nèi)第一行的樣式，如字體、顏色等?
- 首字母樣式?：使用::first-letter偽元素來(lái)設(shè)置元素內(nèi)第一個(gè)字母的樣式，如字體大小、顏色等?
-
示例
- 總結(jié)
