复合选择器定义由两个或多个基础选择器通过不同的方式组合而成作用更准确、更高效的选择目标元素标签。一、关系选择器分类1、后代选择器2、子代选择器3、相邻兄弟选择器4、通用兄弟选择器后代选择器E F {CSS属性}选择所有被E元素包裹的F元素中间用空格隔开。style div span { color: red; } /style spanspan标签/span div span这是div标签中的span标签/span p span这是div标签中的p标签中的span标签/span /p /div子代选择器EF {CSS属性}选择所有作为E元素的直接子元素F对更深一层的元素不起作用中间用 隔开。style div span { color: red; } /style spanspan标签/span div spandiv标签中的span标签/span p spandiv标签中的p标签的span标签/span /p /div相邻选择器EF {CSS属性}选择紧跟E元素的F元素即相邻的第一个元素只能向下选择中间用 隔开。style div span { color: red; } /style spanspan标签/span divdiv标签/div spandiv标签中的span标签/span spandiv标签中的p标签的span标签/span通用兄弟选择器E~F {CSS属性}选择E元素之后的所有F元素作用于多个元素只能向下选择中间用 ~ 隔开。style div ~ span { color: red; } /style spanspan标签/span divdiv标签/div spandiv标签中的span标签/span p spandiv标签中的p标签的span标签/span /p spandiv标签中的第二个span标签/span二、盒子模型1、margin外边距清除边框外的区域外边距是透明的 两个值第一个值上下第二个值左右2、border边框围绕在内边距和内容外的边框 (solid表示实线)3、padding内边距清除内容周围的区域两个值第一个值上下第二个值左右4、content内容盒子的內容显示文本和图像!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCSS盒子模型/title style div { height: 100px; width: 100px; background-color: red; padding: 30px 40px; border: 10px solid green; margin: 40px ; } /style /head body div nihao1 /div /body /html