css .class .class 和 .class.class 和 .class>.class 比较

1、.a.b选择同时具有 .a 和 .b 的元素 , 且优先比使用单独的class要高

<style>.box {width: 200px;height: 150px;border: 1px solid red;}.four {background-color: blue;}.box.one {background: yellow;}</style><div class="box one">div-one</div><div class="box one four">div-four</div>

2、.a .b（中间有空格） 选择 .a 元素 的 .b 子元素 , 且优先比使用单独的class要高

<style>.one {width: 200px;height: 100px;font-weight: 600;border: 1px solid red;}.one .two {color: aqua;}.three {color: blue;}.one .three {color: red;}</style><div class="one">1<div class="two">2<div class="three">3</div></div></div>

3、.a > .b选择 .a 元素 的 直属子元素 .b ，非直属则无效, 且优先比使用单独的class要高

<style>.one {width: 200px;height: 100px;font-weight: 600;border: 1px solid red;}.two {color: black;}.one > .two {color: aqua;}.one > .three {color: red;}</style><div class="one">1<div class="two">2<div class="three">3</div></div></div>