css -- 選擇器 · 前端知識 -- 學習整理

>[success] # 選擇器 >[danger] ##### 基本選擇器 1. **元素選擇器**（type selectors）, 使用`元素的名稱` 2. **類選擇器**（class selectors）, 使用 `.類名 `; 3. **id選擇器**（id selectors）, 使用` #id` 4. **通配符**，使用 `*` >[danger] ##### 后代選擇器 1. 所有的后代(直接/間接的后代),選擇器之間以空格分割 ![](https://img.kancloud.cn/00/bd/00bd776a8f1b959c08ff4c36a747ea7b_415x153.png) >[danger] ##### 子元素選擇器 1. 子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把**父級標簽寫在前面，子級標簽寫在后面**，**中間跟一個>進行連接**，**注意**，符號左右兩側各保留一個空格。 ![](https://img.kancloud.cn/c3/9a/c39a320f3a10127878a3f2110a293e0b_427x145.png) >[danger] ##### 交集選擇器 1. 需要同時符合兩個選擇器條件(兩個選擇器緊密連接)兩個選擇器之間不能有空格,通常為了精準的選擇某一個元素; ![](https://img.kancloud.cn/66/33/6633aabb47b0b95802d8f71321df86ed_438x148.png) >[danger] ##### 并集選擇器 1. 給多個元素設置相同的樣式，逗號隔開 ![](https://img.kancloud.cn/5d/3d/5d3d664acc5f6acf9d669ef67a7c9bb4_428x152.png) >[danger] ##### 偽類選擇器 [所有的偽類](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes) >[danger] ##### 兄弟選擇器 1. 相鄰兄弟選擇器，使用符號 \+ 連接 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標題</title> <style> h2 + h1 { color: yellow; } </style> </head> <body> <h2>1111</h2> <h1>2222</h1> <p>3333</p> <p>4444</p> <p>5555</p> </body> </html> ~~~ ![](https://img.kancloud.cn/89/14/8914dfe9296a20ca51afa12b8750bc6a_93x258.png) 2. 通用兄弟選擇器，兄弟選擇符，位置無須緊鄰，只須同層級，`A~B`選擇`A`元素之后所有同層級`B`元素 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標題</title> <style> h2 ~ p { color: fuchsia; } </style> </head> <body> <h2>1111</h2> <h1>2222</h1> <p>3333</p> <p>4444</p> <p>5555</p> </body> </html> ~~~ ![](https://img.kancloud.cn/67/d6/67d6f3fb7daef341fbde4d79e7235d2c_113x263.png) >[danger] ##### 屬性選擇器屬性選擇器,根據標簽中的屬性最為選擇器的定位 1. 擁有某一個屬性 [att] 2. 屬性等于某個值 \[att=val\] | 選擇器 | 含義 | | --- | --- | | E\[attr\] | 存在attr屬性即可 | | E\[attr=val\] | 屬性值完全等于val | | E\[attr\*=val\] | 屬性值里包含val字符并且在“任意”位置 | | E\[attr^=val\] | 屬性值里包含val字符并且在“開始”位置 | | E\[attr$=val\] | 屬性值里包含val字符并且在“結束”位置 | ~~~ /* 獲取到擁有該屬性的元素 */ li[type] { border: 1px solid gray; } /* 獲取屬性等于某個值的元素屬性值可以使用引號進行包裹 */ li[type="vegetable"] { background-color: green; } /* 使用空格分隔的多個屬性其中有某個屬性即可獲取 */ li[type~="hot"] { font-size: 40px; } /* 獲取以某個屬性開頭的語法 */ li[color^='green'] { background-color: orange; } /* 獲取以某個值結尾的屬性 */ li[type$='t']{ color: hotpink; font-weight: 900; } /* 獲取屬性中擁有某個值的元素 */ li[type*=ea] { font-size: 100px; } /* 如果屬性的值只有very 也能夠獲取用來獲取多個屬性并且使用-連接 */ li[price|='very'] { background-color: darkred; } <ul> <li type='fruit' color='green'>西瓜</li> <li type='vegetable' color='greenyellow'>西蘭花</li> <li type='meat'>牛肉</li> <li type='meat hot'>豬肉</li> <li type='drink hot'>可樂</li> <li type='drink hot'>雪碧</li> <li price='very-cheap'>紅酒</li> <li price='very'>白酒</li> </ul> ~~~ >[info] ## 編寫css 1.去除重復的代碼(css)，將重復的邏輯放到一個單獨的class中，不同的代碼抽到不同的class ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <div class="content a"></div> <div class="content b"></div> </div> </body> <style> /* 提取一個公共的class 名作為他們共同類 */ .content{ background-color: antiquewhite; font-size: 20px; width: 100px; height: 100px; display: inline-block; } /* 在分別定義各自的 */ .a{ border: 1px solid; } .b{ border: 2px solid; } </style> </html> ~~~