目录CSS选择器四大家族 · 嫡系后代天团“后代选择器”家族定位全族后辈通通拿捏目录目录CSS选择器四大家族 · 嫡系后代天团“后代选择器”家族定位全族后辈通通拿捏关系释义匹配所有层级后代子孙不分亲疏、隔代也能选中家族覆盖范围最广。“子选择器”家族定位只认直系亲生子关系释义只匹配一级直接子元素隔代晚辈一概不认血统最纯正。“相邻兄弟选择器”家族定位紧挨着的隔壁亲兄弟关系释义只选中紧跟在后面的唯一一个同级兄弟中间不能有旁人插队“通用兄弟选择器” 家族定位所有同辈兄弟姐妹关系释义匹配后面所有同级同胞只要辈分相同、同在一个父级下全部选中。关系释义匹配所有层级后代子孙不分亲疏、隔代也能选中家族覆盖范围最广。“子选择器”家族定位只认直系亲生子关系释义只匹配一级直接子元素隔代晚辈一概不认血统最纯正。“相邻兄弟选择器”家族定位紧挨着的隔壁亲兄弟关系释义只选中紧跟在后面的唯一一个同级兄弟中间不能有旁人插队“通用兄弟选择器” 家族定位所有同辈兄弟姐妹关系释义匹配后面所有同级同胞只要辈分相同、同在一个父级下全部选中。后代选择器首先后代选择器的定义是匹配作为某个元素的后代的所有元素中间不论隔了多少层只要是包含在后代内的都会被选中在style里面用空格来连接!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title关系选择器/title style /* 选中所有在ul标签下的h2标签将字体颜色改为red */ ul h2{color:red} /style /head body !-- 选中这个ul标签下的所有h2标签后代选择器可以跨代所以在li标签里面的也会被选中 -- ul h2111/h2 li h2222/h2 /li /ul !-- 不止选一个代码会检查所有ul标签只要符合条件就会被选中 -- ul h2333/h2 /ul !-- 这个li标签里面有h2标签但是第一个h2没有被ul包裹所以不会被选中第二个h2符合条件所以被选中 -- li h2444/h2 ul h2555/h2 /ul /li !-- 只要是符合“在ul下面的h2标签”就会被选中无论中间隔了多少层 -- li ul li li h2666/h2 /li /li /ul /li /body /html子代选择器子代选择器不可跨代跨代无效层级必须一一对应顺序不能错乱精准度会比较高一点!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title关系选择器/title style /* 选中所有在ul标签下的li标签下的h2标签并将字体颜色改为red */ ullih2{color:red} /style /head body !-- 层级为ul li h2中间没有间隔符合条件 -- ul li h2888/h2 /li /ul !-- 中间有间隔不连续不符合条件 -- ul li li h2999/h2 /li /li /ul /body /html相邻兄弟选择器用于选中某元素的相邻兄 必须是同级、同辈分标签只选后面紧贴的1个相邻兄弟元素某元素后面第一个同级xxx元素!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title关系选择器/title style /* 选中与ul同级的li元素 */ ulli{color:red} /style /head body !-- 这个ul与其内部的li不属于同级所以000不会被选中 -- ul li000/li /ul !-- 这个li与上面的ul属于同级所以这个li里面的内容会被改变样式 -- li h2100/h2 /li /body /html通用兄弟选择器这个选择器和相邻兄弟选择器类似层级都是同级但是这个选中的范围是某个元素后面的所有同级的某个元素只有同级的和后面的才行前面的不会被选中且中间可以有间隔两个元素之间用 ~ 连接!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title关系选择器/title style /* 选中与ul后面的同级的所有li元素 */ ul~li{color:red} /style /head body li400/li !-- 选中此ul下面的所有同级li元素 -- ul500/ul li600/li h3700/h3 li800/li p900/p h3001/h3 li002/li !-- 这个ul里面的li和上面的ul不是同级所以不会被选中 -- ul li003/li /ul !-- 这个li元素与最上面的ul仍然为同级所以会被选中 -- li004/li /body /html