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