<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                # css 選擇器 [toc] ## 1. 簡單選擇器 ### 1.1 種類 | 序號 | 選擇器 | 描述 | 舉例 | | ---- | ---------- | --------------------------- | ---------------- | | 1 | 元素選擇器 | 根據元素標簽名稱進行匹配 | `div {...}` | | 2 | 群組選擇器 | 同時選擇多個不同類型的元素 | `h1,h2,h3{...}` | | 3 | 通配選擇器 | 選擇全部元素,不區分類型 | `* {...}` | | 4 | 屬性選擇器 | 根據元素屬性進行匹配 | `*[...]` | | 5 | 類選擇器 | 根據元素 class 屬性進行匹配 | `*.active {...}` | | 6 | id 選擇器 | 根據元素 id 屬性進行匹配 | `*#top {...}` | - 元素是使用**標簽和屬性**進行描述,所以使用標簽和屬性來選擇元素非常自然和直觀 - 以上 6 種,其實可分為二類: 元素選擇器和屬性選擇器, 其它的只是二者的特例罷了 - 最常用的是: **元素選擇器, 類選擇器, id 選擇器** - 當 class,id 選擇器不限定被修改的元素類型時, 星號"`*`"可以省略 ### 1.2 示例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>簡單選擇器</title> <style> /* 使用九宮格演示選擇器 */ /* 以下grid, flex布局實現一個九宮格,語法未學到請先忽略 */ /* 類選擇器 */ .container { width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .item { font-size: 2rem; background-color: lightskyblue; display: flex; justify-content: center; align-items: center; } /* 簡單選擇器 */ /* 元素選擇器 */ body { background-color: lightcyan; } /* 多類選擇器 */ .item.center { background-color: lightgreen; } /* id選擇器 */ *#first { background-color: lime; } /* id,class默認可添加到所有元素上,所以可省略*/ /* 特別提示: id唯一性由用戶保證,瀏覽器不檢查,應確保唯一,防止JS獲取失敗 */ #first { background-color: lightpink; } /* 為什么id前添加class選擇器仍然有效呢,這是選擇器的權重: class > 元素 */ .item#first { background-color: lemonchiffon; } /* id的優先級大于class */ #first.item { background-color: violet; } /* 樣式權重優先級: 元素 < 類樣式 < ID */ </style> </head> <body> <div class="container"> <div class="item" id="first">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item center">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </body> </html> ``` --- ## 2. 上下文選擇器 - html 文檔,看上去就像一顆倒置的"樹",所以是有層級結構的 - 每一個元素, 在文檔中, 都有自己的位置,即上下文關系 - 所以, 完全可以根據元素的上下文關系,來獲取到它們 ### 2.1 一個元素的四種角色 | 序號 | 角色 | 描述 | | ---- | -------- | ------------------------------------- | | 1 | 祖先元素 | 擁有子元素,孫元素等所有層級的后代元素 | | 2 | 父級元素 | 僅擁有子元素層級的元素 | | 3 | 后代元素 | 與其它層級元素一起擁有共同祖先元素 | | 4 | 子元素 | 與其它同級元素一起擁有共同父級元素 | ### 2.2 四種上下文選擇器 | 序號 | 選擇器 | 操作符 | 描述 | 舉例 | | ---- | -------------- | ------ | ------------------------------ | ----------------- | | 1 | 后代選擇器 | `空格` | 選擇當前元素的所有后代元素 | `div p`, `body *` | | 2 | 父子選擇器 | `>` | 選擇當前元素的所有子元素 | `div > h2` | | 3 | 同級相鄰選擇器 | `+` | 選擇擁有共同父級且相鄰的元素 | `li.red + li` | | 4 | 同級所有選擇器 | `~` | 選擇擁有共同父級的后續所有元素 | `li.red ~ li` | ### 2.3 示例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>上下文選擇器</title> <style> /* 使用九宮格演示選擇器 */ /* 以下grid, flex布局實現一個九宮格,語法未學到請先忽略 */ .container { width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .item { font-size: 2rem; background-color: lightskyblue; display: flex; justify-content: center; align-items: center; } /* 后代選擇器 */ .container div { border: 1px solid coral; } /* 父子選擇器,只有外層容器div受影響,內部單元格div不受影響 */ body > div { border: 3px solid green; } /* 同級相鄰選擇器 */ /* 當前是第5個,相鄰的下一個就是第6個單元格 */ .item.center + .item { background-color: lightgreen; } /* 同級所有選擇器 */ .item.center ~ .item { background-color: lightsalmon; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item center">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </body> </html> ``` --- ## 3. 偽類選擇器 - 學習之前,先分析上下文選擇器的局限性,例如選擇同一個父級下的第二個子元素,就沒那么簡單 - 而偽類就正好彌補了上下文選擇器的短板, 所以偽類,大多數是基于文檔中元素結構的 - **偽**: 本意是假的,不存在的意思, 這里是特指, 不需要在元素上添加額外的屬性來獲取元素 - **類**: 暗指偽類的級別, 仍然是屬于"class"級別, 仍然屬于屬性選擇器范疇,級別高于元素選擇器 我們重點放在偽類最重要的應用場景: | 場景 | 描述 | | -------- | ---------------------------- | | 結構偽類 | 根據子元素的位置特征進行選擇 | | 表單偽類 | 根據表單控件狀態特征進行選擇 | ### 3.1 結構偽類 #### 3.1.1 不分組匹配 | 序號 | 選擇器 | 描述 | 舉例 | | ---- | -------------------- | ------------------------ | ------------------------ | | 1 | `:first-child` | 匹配第一個子元素 | `div :first-child` | | 2 | `:last-child` | 匹配最后一個子元素 | `div :last-child` | | 3 | `:only-child` | 選擇元素的唯一子元素 | `div :only-child` | | 4 | `:nth-child(n)` | 匹配任意位置的子元素 | `div :nth-child(n)` | | 5 | `:nth-last-child(n)` | 匹配倒數任意位置的子元素 | `div :nth-last-child(n)` | 示例代碼: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>結構偽類選擇器: 不分組匹配</title> <style> /* 使用九宮格演示選擇器 */ /* 以下grid, flex布局實現一個九宮格,語法未學到請先忽略 */ .container { width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .item { font-size: 2rem; background-color: lightskyblue; display: flex; justify-content: center; align-items: center; } /* 省略父元素,則是給'html'元素的子元素添加背景,html只有2個子元素:head,body */ :first-child { background-color: wheat; } /* 匹配第一個子元素 */ /* 不指定具體父元素, 則會從html開始依次查詢每一個子元素*/ /* 從html開始依次遞歸獲取每一個元素的第一個子元素并添加背景 */ /*<head>, div.container, 第一個div.item 會選中*/ * > :first-child { background-color: yellow; } /* 為防止這種遞歸設置, 應該在具體父元素上調用 */ .container > :first-child { background-color: lightgreen; } /* 偽類前默認為通用選擇器* */ .container > *:first-child { background-color: lightgreen; } /* 可以在偽類前指定具體元素 */ /* 因為大家都有.item類,指不指定無所謂,但權重大于默認的**/ .container > .item:first-child { background-color: lightgrey; } /* 匹配最后一個子元素 */ .container > :last-child { background-color: lightpink; } /* 匹配任意位置的子元素 */ /* 索引是從1開始計數 */ /* 該偽類就是用來獲取子元素, 所以選擇器中間的 ">"可省略 */ .container :nth-child(3) { background-color: limegreen; } /* :nth-child()的參數可以使用表達式 */ /* 例如選中所有的偶數單元格: 表達式中的 "n" 是從 "0" 開始的整數,且必須寫到前面*/ /* 返回的必須是有效的索引,即在(1-9)之間 */ .container :nth-child(2n) { background-color: magenta; } /* (2n)可用關鍵字even代替 */ .container :nth-child(even) { background-color: magenta; } /* 選中所有的奇數單元格*/ .container :nth-child(2n-1) { background-color: lightcoral; } /* (2n-1)可用關鍵字odd代替 */ .container :nth-child(odd) { background-color: lightcoral; } /* 為什么第一個奇數單元格會變色,原因是:first-child前用了類選擇器,權重高于默認的通用選擇器* */ /* 去掉.item:first-child 前面的.item, 背景就會變成"lightcoral" */ /* 也可只選擇一部分,例如前三個 */ .container .item:nth-child(-n + 3) { background-color: lightseagreen; } /* 選擇倒數第2個 */ .container .item:nth-last-child(2) { background-color: lime; } /* 選擇最后3個 */ .container .item:nth-last-child(-n + 3) { background-color: lime; } /* 從指定位置開始選擇 */ /* 從第4個單元格開始選擇剩下所有元素 */ .container .item:nth-child(n + 4) { background-color: lightgray; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </body> </html> ``` #### 3.1.2 分組匹配 | 序號 | 選擇器 | 描述 | 舉例 | | ---- | --------------------- | ------------------------------------ | -------------------------- | | 1 | `:first-of-type` | 匹配按類型分組后的第一個子元素 | `div :first-of-type` | | 2 | `:last-of-type` | 匹配按類型分組后的最后一個子元素 | `div :last-of-type` | | 3 | `:only-of-type` | 匹配按類型分組后的唯一子元素 | `div :only-of-type` | | 4 | `:nth-of-type()` | 匹配按類型分組后的任意位置的子元素 | `div :nth-of-type(n)` | | 5 | `:nth-last-of-type()` | 匹配按類型分組后倒數任意位置的子元素 | `div :nth-last-of-type(n)` | - 允許使用表達式來匹配一組元素,表達式中的"n"是從"0"開始計數,且必須寫到前面 - "-n"表示獲取前面一組元素,正數表示從指定位置獲取余下元素 示例代碼: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>結構偽類選擇器: 分組匹配</title> <style> /* 使用九宮格演示選擇器 */ /* 以下grid, flex布局實現一個九宮格,語法未學到請先忽略 */ .container { width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .item { font-size: 2rem; background-color: lightskyblue; display: flex; justify-content: center; align-items: center; } /* 選中第一個span元素: 匹配不上 */ .container span:first-child { background-color: violet; } /* 換成first-of-type, 就匹配上了 */ .container span:first-of-type { background-color: violet; } /* 所謂分組匹配其實有二步: 第一步: 對滿足條件的元素進行分組 第二步: 在分組中根據位置匹配元素 */ /* 匹配分組中的最后一個 */ .container span:last-of-type { background-color: violet; } /* 匹配任何一個 */ .container span:nth-of-type(3) { background-color: violet; } /* 支持表達式: 匹配前3個 */ .container span:nth-of-type(-n + 3) { background-color: lightgrey; } /* 匹配最后2個 */ .container span:nth-last-of-type(-n + 2) { background-color: limegreen; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <!-- 修改dom結構,最后二排使用span元素 --> <span class="item">4</span> <span class="item">5</span> <span class="item">6</span> <span class="item">7</span> <span class="item">8</span> <span class="item">9</span> </div> </body> </html> ``` ### 3.2 表單偽類 | 序號 | 選擇器 | 描述 | | ---- | ---------------- | ------------------------------- | | 1 | `input:enabled` | 選擇每個啟用的 `<input>` 元素 | | 2 | `input:disabled` | 選擇每個禁用的 `<input>` 元素 | | 3 | `:checked` | 選擇每個被選中的 `<input>` 元素 | | 4 | `:required` | 包含`required`屬性的元素 | | 5 | `:optional` | 不包含`required`屬性的元素 | | 6 | `:valid` | 驗證通過的表單元素 | | 7 | `:invalid` | 驗證不通過的表單 | | 8 | `:read-only` | 選擇只讀表單元素 | 示例代碼: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>表單偽類選擇器</title> <style> form { display: flex; flex-flow: column nowrap; } /*表單偽類選擇器*/ /*選擇所有有效的input表單元素*/ /*下拉列表雖有效,但不是input,所以未選中*/ /*警告信息是禁用項, 所以未選中*/ /*保存密碼項實際上選中的, 通過檢查元素可以查詢*/ input:enabled { background-color: blanchedalmond; } /*選擇禁用元素*/ input:disabled { background-color: lightgray; } /*選擇所有必選項*/ input:required { background-color: yellow; } /*更多選項, 供大家上機練習*/ </style> </head> <body> <h3>用戶登錄</h3> <form action="" method="post"> <div> <label for="email">郵箱:</label> <input type="email" id="email" name="email" required placeholder="example@email.com" /> </div> <div> <label for="password">密碼:</label> <input type="password" id="password" name="password" required placeholder="不得少于6位" /> </div> <div> <label for="save">保存密碼:</label> <input type="checkbox" id="save" name="save" checked readonly /> </div> <div> <label for="save_time">保存期限:</label> <select name="save_time" id="save_time"> <option value="7" selected>7天</option> <option value="30">30天</option> </select> </div> <div> <input type="hidden" name="login_time" value="登陸時間戳" /> </div> <div> <label for="warning">警告:</label> <input type="text" id="warning" value="一天內僅允許登錄三次" style="border:none" disabled /> </div> <script> // js未學,暫時忽略,只須知道功能即可: 自動生成時間戳,填充到表單隱藏域中 document.querySelector('[type="hidden"]').value = new Date().getTime(); </script> </form> </body> </html> ``` ### 3.3 其它偽類 | 序號 | 選擇器 | 描述 | | ---- | ---------- | -------------------------------------- | | 1 | `:active` | 向被激活的元素添加樣式 | | 2 | `:focus` | 向擁有鍵盤輸入焦點的元素添加樣式 | | 3 | `:hover` | 當鼠標懸浮在元素上方時,向元素添加樣式 | | 4 | `:link` | 向未被訪問的鏈接添加樣式 | | 5 | `:visited` | 向已被訪問的鏈接添加樣式 | | 5 | `:root` | 根元素,通常是`html` | | 5 | `:empty` | 選擇沒有任何子元素的元素(含文本節點) | | 5 | `:not()` | 排除與選擇器參數匹配的元素 | 示例代碼: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>其它偽類</title> <style> /*根元素*/ :root { background-color: lightcyan; } /*排除元素*/ nav * { /*background-color: lightgreen;*/ } /*排除掉第一個:首頁*/ nav :not(:first-child) { background-color: lightgreen; } /*空元素*/ nav :empty { display: inline-block; height: 20px; width: 100px; background-color: yellow; } /*鏈接偽類*/ a:hover { background-color: #444444; color: white; } a:active, a:focus { background-color: red; } a:visited { background-color: yellow; color: red; } </style> </head> <body> <nav> <a href="">首頁</a> <a href="">視頻教程</a> <a href="">社區問答</a> <a href="">工具軟件</a> <!-- <a href=""></a>--> </nav> </body> </html> ``` ### 3.4 偽元素 - 偽元素, 顧名思義, HTML 源碼并不存在, 而是通過 CSS 添加的 - 主要用于修飾某些元素,添加效果,但又不希望占用元素資源 - 通常與`content`屬性配合使用 | 序號 | 選擇器 | 描述 | | ---- | ---------- | ------------------ | | 1 | `::after` | 在當前元素之后添加 | | 2 | `::before` | 在當前元素之前添加 | 示例代碼: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>偽元素</title> <style> /*不會出現在DOM結構中, 不占用頁面空間*/ a::before { content: "Hello "; } a::after { /*content: ' 歡迎您~~';*/ } /*可調用當前元素的屬性*/ a::after { content: "--" attr(href) "--"; } /*可以插入圖片*/ a:before { content: url("1.jpg"); /*圖片樣式可使用JS修改*/ } </style> </head> <body> <a href="htts://www.php.cn">php中文網</a> </body> </html> ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看