資訊專欄INFORMATION COLUMN
摘要：四偽類列舉狀態(tài)偽類狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。目前，只有火狐瀏覽器支持偽類，并在火狐瀏覽器中使用時需要添加前綴試驗階段。
一、偽類和偽元素的引入 1. 規(guī)范說明
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.2. 直譯理解
CSS 引入偽類和偽元素的概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是列表中的第一個元素。
二、偽類的概念 1. 規(guī)范解釋偽類用于當(dāng)已有元素處于的某個狀態(tài)時，為其添加對應(yīng)的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的。2. 舉例說明
當(dāng)用戶懸停在指定的元素時，我們可以通過 :hover 來描述這個元素的狀態(tài)。雖然它和普通的 CSS 類相似，可以為已有的元素添加樣式，但是它只有處于 DOM 樹無法描述的狀態(tài)下才能為元素添加樣式，所以將其稱為偽類。
三、偽元素的概念 1. 規(guī)范解釋偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式。2. 舉例說明
我們可以通過 :before 來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。
四、偽類列舉 1. 狀態(tài)偽類狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。在與用戶的交互過程中元素的狀態(tài)是動態(tài)變化的，因此該元素會根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。當(dāng)元素處于某狀態(tài)時會呈現(xiàn)該樣式，而進(jìn)入另一狀態(tài)后，該樣式就會失去。
| 選擇器 | 示例 | 示例說明 |
|---|---|---|
| :link | a:link | 選擇所有未訪問鏈接 |
| :visited | a:visited | 選擇所有訪問過的鏈接 |
| :hover | a:hover | 把鼠標(biāo)放在鏈接上的狀態(tài) |
| :active | a:active | 選擇正在活動鏈接 |
| :focus | input:focus | 選擇元素輸入后具有焦點 |
結(jié)構(gòu)化偽類是 CSS3 新增選擇器，利用 DOM 樹進(jìn)行元素過濾，通過文檔結(jié)構(gòu)的互相關(guān)系來匹配元素，能夠減少 class 和 id 屬性的定義，使文檔結(jié)構(gòu)更簡潔。
| 選擇器 | 示例 | 示例說明 |
|---|---|---|
| :first - child | p:first-child | 選擇p元素的第一個子元素 |
| :first-of-type | p:first-of-type | 選擇每個父元素是p元素的第一個p子元素 |
| :last-child | p:last-child | 選擇所有p元素的最后一個子元素 |
| :last-of-type | p:last-of-type | 選擇每個p元素是其母元素的最后一個p元素 |
| :not(selector) | :not(p) | 選擇所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 選擇所有p元素的第二個子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 選擇所有p元素倒數(shù)的第二個子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 選擇所有p元素倒數(shù)的第二個為p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 選擇所有p元素第二個為p的子元素 |
| :only-of-type | p:only-of-type | 選擇所有僅有一個子元素為p的元素 |
| :only-child | p:only-child | 選擇所有僅有一個子元素的p元素 |
| :target | #news:target | 選擇當(dāng)前活動#news元素(點擊URL包含錨的名字) |
| 選擇器 | 示例 | 示例說明 |
|---|---|---|
| :disabled | input:disabled | 選擇所有禁用的表單元素 |
| :enabled | input:enabled | 選擇沒有設(shè)置 disabled 屬性的表單元素 |
| :in-range | input:in-range | 選擇在指定區(qū)域內(nèi)的元素 |
| :out-of-range | input:out-of-range | 選擇不在指定區(qū)域內(nèi)的元素 |
| :valid | input:valid | 選擇條件驗證正確的表單元素 |
| :invalid | input:invalid | 選擇條件驗證錯誤的表單元素 |
| :required | input:required | 選擇設(shè)置 required 屬性的表單元素 |
| :optional | input:optional | 選擇沒有 required 屬性，即設(shè)置 optional 屬性的表單元素 |
| :read-only | input:read-only | 選擇設(shè)置 readonly 只讀屬性的元素 |
| :read-write | input:read-write | 選擇處于編輯狀態(tài)的元素；input，textarea 和設(shè)置 contenteditable 的 HTML 元素獲取焦點時即處于編輯狀態(tài)。 |
| :checked | input:checked | 匹配被選中的 input 元素，input 元素包括 radio 和 checkbox |
| :empty | p:empty | 匹配所有沒有子元素的 p 元素 |
| :default | 匹配默認(rèn)選中的元素(提交按鈕總是表單的默認(rèn)按鈕)。 | |
| :indeterminate | 當(dāng)某組中的單選框或復(fù)選框還沒有選取狀態(tài)時，:indeterminate 匹配該組中所有的單選框或復(fù)選框。 | |
| :scope | 匹配處于 style 作用域下的元素。當(dāng) style 沒有設(shè)置 scope 屬性時，style 內(nèi)的樣式會對整個 html 起作用。(試驗階段) |
| 選擇器 | 作用 | 說明 |
|---|---|---|
| :lang(language) | 匹配設(shè)置了特定語言的元素。 | 設(shè)置特定語言可以通過為了 HTML 元素設(shè)置 lang=”” 屬性，設(shè)置 meta 元素的 charset=”” 屬性，或者是在 http 頭部上設(shè)置語言屬性。實際上，lang=”” 屬性不只可以在 html 標(biāo)簽上設(shè)置，也可以在其他的元素上設(shè)置。 |
| :dir | 匹配指定閱讀方向的元素。 | 當(dāng) HTML 元素中設(shè)置了 dir 屬性時該偽類才能生效?，F(xiàn)時支持的閱讀方向有兩種：ltr（從左往右）和 rtl（從右往左）。目前，只有火狐瀏覽器支持 :dir 偽類，并在火狐瀏覽器中使用時需要添加前綴( -moz-dir() )(試驗階段)。 |
| 選擇器 | 作用 | 說明 |
|---|---|---|
| :root | 匹配文檔的根元素。 | 一般的 html 文件的根元素是 html 元素。 |
| :fullscreen | 匹配處于全屏模式下的元素。 | 全屏模式不是通過按 F11 來打開的全屏模式，而是通過 Javascript 的 Fullscreen API 來打開的，不同的瀏覽器有不同的 Fullscreen API。目前，:fullscreen 需要添加前綴才能使用。 |
| 選擇器 | 作用 | 說明 |
|---|---|---|
| ::before/:before | 在被選元素前插入內(nèi)容。 | 需要使用 content 屬性來指定要插入的內(nèi)容。被插入的內(nèi)容實際上不在文檔樹中。 |
| ::after/:after | 在選被元素后插入內(nèi)容 | 其用法和特性與:before相似。 |
| ::first-letter/:first-letter | 匹配元素中文本的首字母。 | 被修飾的首字母不在文檔樹中。 |
| ::first-line/:first-line | 匹配元素中第一行的文本。 | 這個偽元素只能用在塊元素中，不能用在內(nèi)聯(lián)元素中。 |
| 選擇器 | 作用 | 說明 |
|---|---|---|
| ::selection | 匹配被用戶選中或者處于高亮狀態(tài)的部分。 | 在火狐瀏覽器使用時需要添加 -moz 前綴。 |
| ::placeholder | 匹配占位符的文本。 | 只有元素設(shè)置了 placeholder 屬性時，該偽元素才能生效。該偽元素不是 CSS 的標(biāo)準(zhǔn)，它的實現(xiàn)可能在將來會有所改變，所以要決定使用時必須謹(jǐn)慎。在一些瀏覽器中（IE10 和 Firefox18 及其以下版本）會使用單冒號的形式。 |
| ::backdrop | 用于改變?nèi)聊Ｊ较碌谋尘邦伾?/td> | 全屏模式的默認(rèn)顏色為黑色。(試驗階段) |
閱讀更多：WEBING
參考文章：AlloyTeam
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115814.html
摘要：四偽類列舉狀態(tài)偽類狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。目前，只有火狐瀏覽器支持偽類，并在火狐瀏覽器中使用時需要添加前綴試驗階段。 一、偽類和偽元素的引入 1. 規(guī)范說明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...
摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對的選擇器也是支持的，比如。在選被元素后插入內(nèi)容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴(kuò)展閱讀前端面試題清除浮動前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支持的，比如 ...
摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對的選擇器也是支持的，比如。在選被元素后插入內(nèi)容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴(kuò)展閱讀前端面試題清除浮動前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支持的，比如 ...
摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對的選擇器也是支持的，比如。在選被元素后插入內(nèi)容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴(kuò)展閱讀前端面試題清除浮動前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支持的，比如 ...
摘要：第二等代表選擇器，如，權(quán)值為。第三等代表類，偽類和屬性選擇器，如，權(quán)值為。第五等通配符子選擇器相鄰選擇器等的。第六等繼承的樣式?jīng)]有權(quán)值。 CSS中選擇器優(yōu)先級的權(quán)重計算 先看一段代碼，如下： a{ color: red; } #box a{ color: green; } [class=box] a{ c...
閱讀 2356·2021-11-23 09:51
閱讀 2010·2021-10-14 09:43
閱讀 2780·2021-09-27 13:35
閱讀 1161·2021-09-22 15:54
閱讀 2511·2021-09-13 10:36
閱讀 3818·2019-08-30 15:56
閱讀 3415·2019-08-30 14:09
閱讀 1724·2019-08-30 12:57
