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> ~~~