摘要:一選擇器作用選擇器用于定位我們想要給予樣式的元素,但不只是在中,對的選擇器也是支持的,比如。在選被元素后插入內容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴展閱讀前端面試題清除浮動前端面試題塊格式化上下文
一、CSS選擇器作用
CSS 選擇器用于定位我們想要給予樣式的 HTML 元素,但不只是在 CSS 中,JavaScript 對 CSS 的選擇器也是支持的,比如 document.document.querySelectorAll。二、選擇器類型
基本選擇器
組合選擇器
屬性選擇器
偽類選擇器
偽元素選擇器
三、基本選擇器選擇器 | 含義 | 作用 | CSS |
---|---|---|---|
.class | 類選擇器 | 匹配 class 包含(不是等于)特定類的元素 | 1 |
#id | id選擇器 | 匹配特定 id 的元素 | 1 |
* | 通用元素選擇器 | 匹配頁面任何元素(這也就決定了我們很少使用) | 2 |
element | 元素選擇器 | 選擇HTML元素 | 1 |
選擇器 | 含義 | 作用 | CSS |
---|---|---|---|
E,F | 多元素選擇器 | 同時匹配元素E或元素F | 1 |
E F | 后代選擇器 | 匹配E元素所有的后代(不只是子元素、子元素向下遞歸)元素F | 1 |
E>F | 子元素選擇器 | 匹配E元素的所有直接子元素 | 2 |
E+F | 直接相鄰選擇器 | 匹配E元素之后的相鄰的同級元素F | 2 |
E~F | 普通相鄰選擇器(弟弟選擇器) | 匹配E元素之后的同級元素F(無論直接相鄰與否) | 3 |
選擇器 | 示例 | 示例說明 | CSS |
---|---|---|---|
[attribute] | [target] | 選擇所有帶有target屬性元素 | 2 |
[attribute=value] | [target=-blank] | 選擇所有使用target="-blank"的元素 | 2 |
[attribute~=value] | [title~=flower] | 選擇標題屬性包含單詞"flower"的所有元素 | 2 |
[attribute ^= language] | [lang ^= en] | 選擇一個lang屬性的起始值="EN"的所有元素 | 2 |
[attribute $= language] | [lang $= en] | 選擇一個lang屬性的結尾值="EN"的所有元素 | 2 |
[attribute *= language] | [lang *= en] | 選擇一個lang屬性的包含"EN"的所有元素 | 2 |
選擇器 | 示例 | 示例說明 | CSS |
---|---|---|---|
:link | a:link | 選擇所有未訪問鏈接 | 1 |
:visited | a:visited | 選擇所有訪問過的鏈接 | 1 |
:hover | a:hover | 把鼠標放在鏈接上的狀態 | 1 |
:active | a:active | 選擇正在活動鏈接 | 1 |
:focus | input:focus | 選擇元素輸入后具有焦點 | 2 |
所有偽類選擇器在前端面試題-偽類和偽元素
七、偽元素選擇器選擇器 | 作用 | 說明 | CSS |
---|---|---|---|
::before/:before | 在被選元素前插入內容。 | 需要使用 content 屬性來指定要插入的內容。被插入的內容實際上不在文檔樹中。 | 2 |
::after/:after | 在選被元素后插入內容 | 其用法和特性與:before相似。 | 2 |
::first-letter/:first-letter | 匹配元素中文本的首字母。 | 被修飾的首字母不在文檔樹中。 | 1 |
::first-line/:first-line | 匹配元素中第一行的文本。 | 這個偽元素只能用在塊元素中,不能用在內聯元素中。 | 1 |
所有偽元素選擇器在前端面試題-偽類和偽元素
擴展閱讀
前端面試題-clearfix(清除浮動)
前端面試題-BFC(塊格式化上下文)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115811.html
摘要:一選擇器作用選擇器用于定位我們想要給予樣式的元素,但不只是在中,對的選擇器也是支持的,比如。在選被元素后插入內容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴展閱讀前端面試題清除浮動前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素,但不只是在 CSS 中,JavaScript 對 CSS 的選擇器也是支持的,比如 ...
摘要:一選擇器作用選擇器用于定位我們想要給予樣式的元素,但不只是在中,對的選擇器也是支持的,比如。在選被元素后插入內容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素擴展閱讀前端面試題清除浮動前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素,但不只是在 CSS 中,JavaScript 對 CSS 的選擇器也是支持的,比如 ...
摘要:不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換,減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話,他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級 一、CSS選擇符 CSS選擇符由一些初始化參數組成,這些參數指明了要應用這個CSS規則的頁面元素。 作為一個網站的前端開發工程師,應該避免編寫一些常見的開銷很大的CS...
摘要:不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換,減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話,他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級 一、CSS選擇符 CSS選擇符由一些初始化參數組成,這些參數指明了要應用這個CSS規則的頁面元素。 作為一個網站的前端開發工程師,應該避免編寫一些常見的開銷很大的CS...
摘要:優先級是基于不同種類選擇器組成的匹配規則。但是,在內部聲明的選擇器是會影響優先級。當兩條相互沖突的帶有規則的聲明被應用到相同的元素上時,擁有更大優先級的聲明將會被采用。擴展閱讀前端面試題選擇器 一、選擇器優先級 瀏覽器通過優先級來判斷哪一些屬性值與一個元素最為相關,從而在該元素上應用這些屬性值。優先級是基于不同種類選擇器組成的匹配規則。 二、優先級計算 優先級就是分配給指定的CSS聲明...
閱讀 1310·2021-11-22 14:44
閱讀 2445·2021-09-30 09:47
閱讀 1220·2021-09-09 11:56
閱讀 2076·2021-09-08 09:45
閱讀 3953·2021-08-31 09:40
閱讀 1246·2019-08-30 15:52
閱讀 2044·2019-08-30 14:09
閱讀 1578·2019-08-26 17:04