简单选择器

classs选择器

用（.）来标记文档中的个元素可以具有相同的类名，而单个元素可以用多个类名（之间用空格隔开）。

id选择器

用（#）来标记 id名称必须在文件中是唯一的。

通用选择

用（*）来标记选择一个页面中所有的元素

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   *{
      margin: 0 auto;
      font-size: 14px;
   }
   /* 通用选择器页面中所有的元素 */
   #box
   {
       width: 200px;
       height:200px;
       background: cornflowerblue;
   }
   /* 标记页面中唯一的元素 */
   .box_text
   {
     text-align: center;
     line-height: 200px;
     font-size: 2rem;
     color: cornsilk;
   }
     /* 页面中元素可以相同的类名 */
</style>
<body>
    <div id="box">
      <div class="box_text">简单选择器</div>
    </div>
</body>
</html>

上下文选择器

1. 后代选择器:先找到祖先元素,再选择它下面的所有指定后代元素。

语法: 祖先与目标之间用空格分开,可以有多级,用多个空格区隔
格式: 祖先目标 {样式声明}

2. 子选择器:先找到父级元素,再选择他下面所有直接后代元素。

语法: 父级与目标直接用 > 分开。
格式: 父级 > 目标元素 {样式声明}

3. 相邻选择器: 先确定同胞元素的起始点,选择后面的所有的指定元素。

语法: 相邻元素的起始点用+号连接。
格式: 元素本身 + 相邻元素 {样式声明}

4. 同级所有选择器: 同级共享指定元素。

语法: 同级相同的所有元素 ~ 号连接。
格式: 元素本身 ~ 同级元素 {样式声明}

实例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
         width: 330px;
         height: 330px;
         margin: 0 auto;
    }    
    .item
     {
         border: 1px solid darkblue;
         width: 100px;
         height: 100px;
         float: left;
         margin: 4px;
         font-size: 2rem;
         text-align: center;
         line-height: 100px;
     }
    .box div
    {
        background: coral;         
    }
    /* 后代选择器：空格 */
    body > div
    {
        background: blueviolet;
    }
    /* 父子选择器：> */
    .item.center
    {
        background: thistle;
    }
    .item.center + .item
    {
        font-size: 3rem;
        color: thistle;
    }
    /* 相邻选择器: +  */
    .item.center ~ .item
    {
        width: 45px;
        height: 45px;
        float: left;
        border: 1px solid teal;
        font-size: 1rem;
        line-height: 40px;
        color: white;
        margin: 2px;
    } 
    /* 同级下所有选择器：~ */
</style>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item center">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</body>
</html>