[webgis 0基础到找工作]------CSS day04

1.复合选择器

由两个或多个基础选择器，通过不同的方式组合而成。

后代选择器

选中某元素的后代元素。

写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。

<style>
  div span {
    color: red;
  }
</style>
<span> span 标签</span>
<div>
  <span>这是 div 的儿子 span</span >
</div>

子代选择器

选中某元素的子代元素（最近的子级）。

写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。

<style>
  div > span {
    color: red;
  }
</style>

<div>
  <span>这是 div 里面的 span</span>
  <p>
    <span>这是 div 里面的 p 里面的 span</span>
  </p>
</div>

并集选择器

选中多组标签设置相同的样式。

写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。

<style>
  div,
  p,
  span {
    color: red;
  }
</style>

<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>

交集选择器

<style>
    /* 第一个 p 标签文字颜色是红色 */
    /* 既又的关系：既是 p 标签，又是有 box 类 */
    p.box {
      color: red;