女同免费毛片在线播放,免费无码专区毛片高潮喷水,年轻漂亮少妇私密精油按摩保养 ,老师在办公室被躁在线观看,久久婷婷人人澡人爽人人喊

首頁/ 站長工具/ {notempty name="current_name"} CSS選擇器參考表 {notempty name="$current_name"}
CSS選擇器參考表

CSS選擇器參考表

最新CSS選擇器權(quán)威指南 | 完整解析W3C標(biāo)準(zhǔn)支持的45+種選擇器類型，涵蓋元素選擇器、類選擇器、ID選擇器、屬性選擇器、偽類選擇器(:hover/:nth-child)、偽元素選擇器(::before)及組合選擇器的實(shí)戰(zhàn)用法。提供瀏覽器兼容性數(shù)據(jù)、代碼示例及選擇器性能優(yōu)化技巧，助您快速掌握現(xiàn)代前端開發(fā)核心技能。前端工程師必備參考資料，立即學(xué)習(xí)高效調(diào)試與跨設(shè)備適配方案！
選擇器 示例 示例說明 CSS 規(guī)范
* * 選擇頁面中所有元素（可以把 *理解為是一個(gè)通配符） CSS 2
:root :root 選擇文檔的根元素。通常用于在 :root中設(shè)置 CSS 變量 CSS 3
:lang(language) html:lang(fr) 選擇 lang="fr"的 <html>元素。通常使用該選擇器來對不同語言的頁面進(jìn)行樣式定制化 CSS 2
#id #chart ID 選擇器，選擇頁面中 id="chart"的元素 CSS 1
.class .card 類選擇器，選擇頁面中 class="card"的所有元素 CSS 1
.class1.class2 .btn.btn-danger 選擇同時(shí)具有 btn和 btn-danger類名的所有元素 CSS 1
.class1 .class2 .card .card-body 在 class屬性等于 card元素后代中，選擇具有 card-body類名的元素 CSS 1
element ul 元素選擇器，選擇頁面中所有 <ul>元素 CSS 1
element.class input.form-control 選擇頁面中 class="form-control"的所有 <input>元素 CSS 1
element1,element2 a,button 選擇頁面中所有 <a>和所有 <button>元素 CSS 1
element1 element2 div table 選擇 <div>元素內(nèi)的所有 <table>元素 CSS 1
element1 >element2 ul >li 選擇 <ul>元素的直接 <li>子元素 CSS 2
element1+element2 input+span 選擇緊跟 <input>元素的首個(gè) <span>元素 CSS 2
element1~element2 hr~div 選擇前面有 <hr>元素的每個(gè) <div>元素 CSS 3
[attribute] [disabled] 屬性選擇器，選擇頁面中所有帶 disabled屬性的元素 CSS 2
[attribute=value] [target=_blank] 選擇帶有 target="_blank"屬性的所有元素 CSS 2
[attribute~=value] [value~=tool] 選擇 value屬性中包含 tool字樣的所有元素 CSS 2
[attribute|=value] [lang|=zh] 選擇 lang屬性值等于 zh或以 zh-開頭的所有元素 CSS 2
[attribute^=value] a[href^=mailto] 選擇 href屬性值以 mailto開頭的每個(gè) <a>元素 CSS 3
[attribute$=value] img[src$=".png"] 選擇 src屬性以 .png結(jié)尾的所有 <img>元素 CSS 3
[attribute*=value] a[href*=rest] 選擇 href屬性值中包含 rest字符串的每個(gè) <a>元素 CSS 3
:active a:active 選擇頁面中的活動(dòng)鏈接 CSS 1
:hover a:hover 選擇鼠標(biāo)停留在其上的鏈接 CSS 1
:visited a:visited 選擇頁面中已訪問過的鏈接 CSS 1
:link a:link 選擇頁面中未訪問過的鏈接 CSS 1
::after div::after 偽元素選擇器，表示在每個(gè) <div>內(nèi)部的最后插入內(nèi)容 CSS 2
::before div::before 偽元素選擇器，表示在每個(gè) <div>內(nèi)部的最開始插入內(nèi)容 CSS 2
:checked input:checked 選擇每個(gè)已選中的 <input>元素，通常用于選擇 type="checkbox"的 <input>元素 CSS 3
:enabled button:enabled 選擇頁面中每個(gè)已啟用的 <button>元素 CSS 3
:disabled button:disabled 選擇頁面中每個(gè)被禁用的 <button>元素 CSS 3
:default input:default 選擇默認(rèn)的 <input>元素 CSS 3
:empty div:empty 選擇沒有子元素的每個(gè) <div>元素（包括文本節(jié)點(diǎn)）。 CSS 3
:first-child p:first-child 選擇屬于父元素的第一個(gè)子元素的每個(gè) <p>元素 CSS 2
::first-letter p::first-letter 偽元素選擇器，選擇每個(gè) <p>元素的首字母 CSS 1
::first-line p::first-line 偽元素選擇器，選擇每個(gè) <p>元素的首行（第一行） CSS 1
:first-of-type p:first-of-type 選擇每個(gè) <p>元素，且該元素是其父級的第一個(gè) <p>元素 CSS 3
:focus input:focus 選擇當(dāng)前獲得焦點(diǎn)的 <input>元素 CSS 2
:fullscreen :fullscreen 選擇當(dāng)前處于全屏模式的元素 實(shí)驗(yàn)性
::backdrop ::backdrop 偽元素選擇器，選擇在任何處于全屏模式的元素下的即刻渲染的盒子 實(shí)驗(yàn)性
:in-range input:in-range 選擇值處于指定范圍之內(nèi)的 <input>元素 CSS 3
:out-of-range input:out-of-range 選擇值超出指定范圍的 <input>元素 CSS 3
:indeterminate input:indeterminate 選擇處于不確定狀態(tài)的 <input>元素。通常用于選擇那些具有中間狀態(tài)的 checkboxes、progress和 radios等元素 CSS 3
:valid input:valid 選擇當(dāng)前值為有效值的所有 <input>元素 CSS 3
:invalidinput:invalid選擇當(dāng)前值為無效值的所有 < input> 元素CSS 3
:last-childp:last-child選擇屬于父元素最后一個(gè)子元素的每個(gè) < p> 元素CSS 3
:last-of-typep:last-of-type選擇每個(gè) < p> 元素，且該元素是其父級的最后一個(gè) < p> 元素CSS 3
:not(selector):not(button:disabled)否定選擇器，選擇所有未被禁用的按鈕CSS 3
:nth-child(n)li:nth-child(4)選擇屬于其父元素的第四個(gè)子元素的每個(gè) < li> 元素CSS 3
:nth-last-child(n)li:nth-last-child(2)選擇屬于其父元素的倒數(shù)第二個(gè)子元素的每個(gè) < li> 元素CSS 3
:nth-of-type(n)p:nth-of-type(2)選擇屬于其父元素第二個(gè) < p> 元素的每個(gè) < p> 元素CSS 3
:nth-last-of-type(n)p:nth-last-of-type(2)選擇屬于其父元素倒數(shù)第二個(gè) < p> 元素的每個(gè) < p> 元素CSS 3
:only-of-typep:only-of-type選擇 < p> 元素，且該 < p> 元素沒有其他相同類型的兄弟元素CSS 3
:only-childp:only-child選擇屬于其父元素的唯一子元素的每個(gè) < p> 元素CSS 3
:requiredinput:required選擇帶有 required屬性的 < input> 元素CSS 3
:optionalinput:optional選擇不帶 required屬性的 < input> 元素CSS 3
::placeholderinput::placeholder偽元素選擇器，用于設(shè)置 < input> 元素的 placeholder 占位符樣式實(shí)驗(yàn)性
:read-onlyinput:read-only選擇帶有 readonly屬性的 < input> 元素CSS 3
:read-writeinput:read-write選擇不帶 readonly屬性的 < input> 元素CSS 3
::selection::selection偽元素選擇器，可設(shè)置已選取內(nèi)容的樣式CSS 3
:target#profile:target選擇當(dāng)前活動(dòng)的 #profile 元素CSS 3
補(bǔ)充糾錯(cuò)
CSS選擇器參考表核心指南

▌選擇器定義

CSS 選擇器是用于精準(zhǔn)定位HTML文檔中目標(biāo)元素的模式匹配規(guī)則，通過組合不同的選擇邏輯，可實(shí)現(xiàn)高效、精準(zhǔn)的樣式控制與動(dòng)態(tài)交互。

▌選擇器分類體系

  • 基礎(chǔ)選擇器：元素(p)、類(.btn)、ID(#header)、通配符(*)
  • 屬性選擇器：[type="text"]、[href^="https"]
  • 偽類選擇器：:hover、:nth-child(2n+1)、:focus
  • 偽元素選擇器：::before、::first-line
  • 組合選擇器：后代(空格)、子元素(>)、相鄰兄弟(+)、通用兄弟(~)

▌學(xué)習(xí)路徑建議

推薦采用漸進(jìn)式學(xué)習(xí)方法： 1. 掌握基礎(chǔ)選擇器語法 → 2. 理解組合選擇邏輯 → 3. 熟悉偽類狀態(tài)機(jī)制 → 4. 掌握復(fù)雜選擇器調(diào)試技巧 → 5. 學(xué)習(xí)選擇器性能優(yōu)化

▌最佳實(shí)踐

            /* 響應(yīng)式導(dǎo)航欄高亮 */
            .nav-list > li:first-child > a:hover::after {
                content: "?";
                color: #1890ff;
            }
            
            /* 表單驗(yàn)證提示 */
            input[required]:invalid {
                border-color: #ff4d4f;
                box-shadow: 0 0 3px rgba(255,77,79,.25);
            }

▌專業(yè)建議

  • 優(yōu)先使用類選擇器保持代碼可復(fù)用性
  • 避免深層嵌套選擇器(建議不超過3層)
  • 使用瀏覽器開發(fā)者工具的Elements面板驗(yàn)證選擇器匹配結(jié)果
  • 了解選擇器優(yōu)先級計(jì)算規(guī)則(權(quán)重體系)