国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端面試題-偽類和偽元素

Cristic / 3409人閱讀

摘要：四偽類列舉狀態偽類狀態偽類是基于元素當前狀態進行選擇的。目前，只有火狐瀏覽器支持偽類，并在火狐瀏覽器中使用時需要添加前綴試驗階段。

一、偽類和偽元素的引入 1. 規范說明 
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. 規范解釋 
偽類用于當已有元素處于的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的。
2. 舉例說明

當用戶懸停在指定的元素時，我們可以通過 :hover 來描述這個元素的狀態。雖然它和普通的 CSS 類相似，可以為已有的元素添加樣式，但是它只有處于 DOM 樹無法描述的狀態下才能為元素添加樣式，所以將其稱為偽類。

三、偽元素的概念 1. 規范解釋 
偽元素用于創建一些不在文檔樹中的元素，并為其添加樣式。
2. 舉例說明

我們可以通過 :before 來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。

四、偽類列舉

1. 狀態偽類

狀態偽類是基于元素當前狀態進行選擇的。在與用戶的交互過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。當元素處于某狀態時會呈現該樣式，而進入另一狀態后，該樣式就會失去。

選擇器 示例 示例說明
:link a:link 選擇所有未訪問鏈接
:visited a:visited 選擇所有訪問過的鏈接
:hover a:hover 把鼠標放在鏈接上的狀態
:active a:active 選擇正在活動鏈接
:focus input:focus 選擇元素輸入后具有焦點
2. 結構化偽類

結構化偽類是 CSS3 新增選擇器，利用 DOM 樹進行元素過濾，通過文檔結構的互相關系來匹配元素，能夠減少 class 和 id 屬性的定義，使文檔結構更簡潔。

選擇器 示例 示例說明
: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元素倒數的第二個子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 選擇所有p元素倒數的第二個為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 選擇當前活動#news元素(點擊URL包含錨的名字)
3. 表單相關
選擇器 示例 示例說明
:disabled input:disabled 選擇所有禁用的表單元素
:enabled input:enabled 選擇沒有設置 disabled 屬性的表單元素
:in-range input:in-range 選擇在指定區域內的元素
:out-of-range input:out-of-range 選擇不在指定區域內的元素
:valid input:valid 選擇條件驗證正確的表單元素
:invalid input:invalid 選擇條件驗證錯誤的表單元素
:required input:required 選擇設置 required 屬性的表單元素
:optional input:optional 選擇沒有 required 屬性，即設置 optional 屬性的表單元素
:read-only input:read-only 選擇設置 readonly 只讀屬性的元素
:read-write input:read-write 選擇處于編輯狀態的元素；input，textarea 和設置 contenteditable 的 HTML 元素獲取焦點時即處于編輯狀態。
:checked input:checked 匹配被選中的 input 元素，input 元素包括 radio 和 checkbox
:empty p:empty 匹配所有沒有子元素的 p 元素
:default 匹配默認選中的元素(提交按鈕總是表單的默認按鈕)。
:indeterminate 當某組中的單選框或復選框還沒有選取狀態時，:indeterminate 匹配該組中所有的單選框或復選框。
:scope 匹配處于 style 作用域下的元素。當 style 沒有設置 scope 屬性時，style 內的樣式會對整個 html 起作用。(試驗階段)
4. 語言相關
選擇器 作用 說明
:lang(language) 匹配設置了特定語言的元素。 設置特定語言可以通過為了 HTML 元素設置 lang=”” 屬性，設置 meta 元素的 charset=”” 屬性，或者是在 http 頭部上設置語言屬性。實際上，lang=”” 屬性不只可以在 html 標簽上設置，也可以在其他的元素上設置。
:dir 匹配指定閱讀方向的元素。 當 HTML 元素中設置了 dir 屬性時該偽類才能生效。現時支持的閱讀方向有兩種：ltr（從左往右）和 rtl（從右往左）。目前，只有火狐瀏覽器支持 :dir 偽類，并在火狐瀏覽器中使用時需要添加前綴( -moz-dir() )(試驗階段)。
5. 其他
選擇器 作用 說明
:root 匹配文檔的根元素。 一般的 html 文件的根元素是 html 元素。
:fullscreen 匹配處于全屏模式下的元素。 全屏模式不是通過按 F11 來打開的全屏模式，而是通過 Javascript 的 Fullscreen API 來打開的，不同的瀏覽器有不同的 Fullscreen API。目前，:fullscreen 需要添加前綴才能使用。
五、偽元素列舉

1. 單雙冒號
選擇器 作用 說明
::before/:before 在被選元素前插入內容。 需要使用 content 屬性來指定要插入的內容。被插入的內容實際上不在文檔樹中。
::after/:after 在選被元素后插入內容 其用法和特性與:before相似。
::first-letter/:first-letter 匹配元素中文本的首字母。 被修飾的首字母不在文檔樹中。
::first-line/:first-line 匹配元素中第一行的文本。 這個偽元素只能用在塊元素中，不能用在內聯元素中。
2. 僅雙冒號
選擇器 作用 說明
::selection 匹配被用戶選中或者處于高亮狀態的部分。 在火狐瀏覽器使用時需要添加 -moz 前綴。
::placeholder 匹配占位符的文本。 只有元素設置了 placeholder 屬性時，該偽元素才能生效。該偽元素不是 CSS 的標準，它的實現可能在將來會有所改變，所以要決定使用時必須謹慎。在一些瀏覽器中（IE10 和 Firefox18 及其以下版本）會使用單冒號的形式。
::backdrop 用于改變全屏模式下的背景顏色。 全屏模式的默認顏色為黑色。(試驗階段)

閱讀更多：WEBING
參考文章：AlloyTeam

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115814.html

相關文章

  • 前端面試題-偽類和偽元素

    摘要：四偽類列舉狀態偽類狀態偽類是基于元素當前狀態進行選擇的。目前，只有火狐瀏覽器支持偽類，并在火狐瀏覽器中使用時需要添加前綴試驗階段。 一、偽類和偽元素的引入 1. 規范說明 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information...

    entner 評論0 收藏0

  • 前端面試題-CSS選擇器

    摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對的選擇器也是支持的，比如。在選被元素后插入內容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴展閱讀前端面試題清除浮動前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支持的，比如 ...

    leanote 評論0 收藏0

  • 前端面試題-CSS選擇器

    摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對的選擇器也是支持的，比如。在選被元素后插入內容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴展閱讀前端面試題清除浮動前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支持的，比如 ...

    h9911 評論0 收藏0

  • 前端面試題-CSS選擇器

    摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對的選擇器也是支持的，比如。在選被元素后插入內容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴展閱讀前端面試題清除浮動前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支持的，比如 ...

    mingzhong 評論0 收藏0

  • 前端面試題：CSS中的選擇器權重

    摘要：第二等代表選擇器，如，權值為。第三等代表類，偽類和屬性選擇器，如，權值為。第五等通配符子選擇器相鄰選擇器等的。第六等繼承的樣式沒有權值。 CSS中選擇器優先級的權重計算 先看一段代碼，如下： a{ color: red; } #box a{ color: green; } [class=box] a{ c...

    cppprimer 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<