CSS四大选择器：90%的人只用到前两个，第三个能让你代码效率翻倍！
目录
CSS选择器四大家族 · 嫡系后代天团
“后代选择器”家族定位：全族后辈通通拿捏
目录
目录
CSS选择器四大家族 · 嫡系后代天团
“后代选择器”家族定位：全族后辈通通拿捏
关系释义：匹配所有层级后代子孙，不分亲疏、隔代也能选中，家族覆盖范围最广。
“子选择器”家族定位：只认直系亲生子
关系释义：只匹配一级直接子元素，隔代晚辈一概不认，血统最纯正。
“相邻兄弟选择器”家族定位：紧挨着的隔壁亲兄弟
关系释义：只选中紧跟在后面的唯一一个同级兄弟，中间不能有旁人插队
“通用兄弟选择器” 家族定位：所有同辈兄弟姐妹
关系释义：匹配后面所有同级同胞，只要辈分相同、同在一个父级下，全部选中。
关系释义：匹配所有层级后代子孙，不分亲疏、隔代也能选中，家族覆盖范围最广。
“子选择器”家族定位：只认直系亲生子
关系释义：只匹配一级直接子元素，隔代晚辈一概不认，血统最纯正。
“相邻兄弟选择器”家族定位：紧挨着的隔壁亲兄弟
关系释义：只选中紧跟在后面的唯一一个同级兄弟，中间不能有旁人插队
“通用兄弟选择器” 家族定位：所有同辈兄弟姐妹
关系释义：匹配后面所有同级同胞，只要辈分相同、同在一个父级下，全部选中。
后代选择器
首先，后代选择器的定义是匹配作为某个元素的后代的所有元素，中间不论隔了多少层，只要是包含在后代内的都会被选中，在style里面用空格来连接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>关系选择器</title> <style> /* 选中所有在ul标签下的h2标签将字体颜色改为red */ ul h2{color:red} </style> </head> <body> <!-- 选中这个ul标签下的所有h2标签，后代选择器可以跨代，所以在li标签里面的也会被选中 --> <ul> <h2>111</h2> <li> <h2>222</h2> </li> </ul> <!-- 不止选一个，代码会检查所有ul标签，只要符合条件就会被选中 --> <ul> <h2>333</h2> </ul> <!-- 这个li标签里面有h2标签，但是第一个h2没有被ul包裹，所以不会被选中，第二个h2符合条件，所以被选中 --> <li> <h2>444</h2> <ul> <h2>555</h2> </ul> </li> <!-- 只要是符合“在ul下面的h2标签”就会被选中，无论中间隔了多少层 --> <li> <ul> <li> <li> <h2>666</h2> </li> </li> </ul> </li> </body> </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> /* 选中所有在ul标签下的li标签下的h2标签并将字体颜色改为red */ ul>li>h2{color:red} </style> </head> <body> <!-- 层级为ul > li > h2，中间没有间隔，符合条件 --> <ul> <li> <h2>888</h2> </li> </ul> <!-- 中间有间隔，不连续，不符合条件 --> <ul> <li> <li> <h2>999</h2> </li> </li> </ul> </body> </html>相邻兄弟选择器
用于选中某元素的相邻兄 必须是同级、同辈分标签
只选后面紧贴的1个相邻兄弟元素（某元素后面第一个同级xxx元素）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>关系选择器</title> <style> /* 选中与ul同级的li元素 */ ul+li{color:red} </style> </head> <body> <!-- 这个ul与其内部的li不属于同级，所以000不会被选中 --> <ul> <li>000</li> </ul> <!-- 这个li与上面的ul属于同级，所以这个li里面的内容会被改变样式 --> <li> <h2>100</h2> </li> </body> </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> /* 选中与ul后面的同级的所有li元素 */ ul~li{color:red} </style> </head> <body> <li>400</li> <!-- 选中此ul下面的所有同级li元素 --> <ul>500</ul> <li>600</li> <h3>700</h3> <li>800</li> <p>900</p> <h3>001</h3> <li>002</li> <!-- 这个ul里面的li和上面的ul不是同级，所以不会被选中 --> <ul> <li>003</li> </ul> <!-- 这个li元素与最上面的ul仍然为同级，所以会被选中 --> <li>004</li> </body> </html>