css复合选择器

后代选择器，选择器之间用空格隔开，选择器1下所有选择器2都会被选择（包括所有后代）

    div p {
      color: red;
    }

子代选择器，选择器之间用>隔开，只会选择选择器1下一级满足选择器2的标签（只包括儿子）

    div>a {
      color: aqua;
    }

并集选择器，把选择器中所有标签都选择，选择器之间用,隔开，选择器通常一行写一个，每组选择器可以是基础选择器或者复合选择器

    span,
    h1,
    h2 {
      color: blue;
    }

交集选择器，选择器1.选择器2（找符合选择器的标签）

    p.box {
      color: navajowhite;
    }

伪类选择器，设置鼠标悬停在标签上的状态

    a:hover {
      color: chartreuse;
      background-color: darkgray;
    }

浏览器效果测试

  <p>这是p标签</p>
  <div>
    <p>这是p标签</p>
  </div>

  <div>
    <a href="#">超链接</a>
  </div>

  <div>
    <p>
      <a href="#">超链接</a>
    </p>
  </div>

  <span>span</span>
  <h1>h1</h1>
  <h2>h2</h2>

  <p class="box">ppppp</p>
  <p>ppppp</p>
  <div class="box">ddddd</div>

你知道被上面的复合选择器代码实例控制的上述html代码中，每个标签的样式是什么样的吗？可以在脑海中想一会。
现在揭晓答案:

背景

css语法中，背景由background属性控制。

代码实例

    div{
      background-color: pink;
      background-color: rgba(0,0,0,0)
    }

background-color 属性控制背景颜色，属性值是各种颜色，也可以用rgba色彩空间指定颜色；在vscode中使用rgba时，填入类似rgba(0,0,0,0)这样的代码，会在rgba代码的左边生成一个色彩板，如图所示：

点击后就会生成以下色彩板:

然后就可以在色彩板上定制颜色了。

    div{
      background-image: url('图片存放路径');
      background-repeat: no-repeat;
      background-position: 100px 100px;
      background-size: contain;
    }

background-image是设置背景图片的属性，背景图片默认在水平和垂直方向平铺的；

background-repeat是设置背景图片平铺方式的属性，取值可以是repeat、no-repeat、repeat-x、repeat-y
repeat是默认值，水平垂直方向都平铺；no-repeat是不平铺；repeat-x/-y是指只沿着x轴/y轴平铺;

background-position的属性值示例:
    background-position: 水平方向位置垂直方向位置;
    属性取值1：方位名词。水平方向：left、center、right(左中右)；垂直方向：top、    center、bottom(上中下);
    属性取值2：数字+px(坐标)。原点(0,0)是盒子的左上角，坐标系中x轴水平向右，y轴垂直向下;
    方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直

background-size的作用:
    设置背景图片的大小，语法: background-size: 宽度高度;
    取值: 数字+px         百分比: 相对于当前盒子自身的宽高百分比
    contain: 包含，将背景图片等比例缩放，直到不会超出盒子的最大
    cover: 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

background: pink url('图片存放路径') no-repeat 100px 100px;

background属性连写，可以按照需求省略，size和position占一个位置，size写在连写后为最优解。

css复合选择器、背景介绍