选择器的作用

• 选择对应的标签，为之添加样式

标签选择器

• 根据标签名找到标签

    eg:
        <div>div1</div>
        <div>div2</div>

    div {
        color：red;
    }

分类

• 类选择器

  • "."+"类名"找到标签
  • 类选择器格式：. 类名

    eg:
    ​    ​<p class="high">第一段文字</p>
    ​    ​<p>第二段文字</p>
        <div class="high">div1</div>
        <div>div2</div>

    .high  {
        color：red;
    }

​结果：

结果.png

• id选择器

  • "#"+"类名"找到标签
  • 类选择器格式：# 类名

    eg:
    ​    ​<p id="first">第一段文字</p>
    ​    ​<p>第二段文字</p>

    #first {
        color：red;
    }

结果：

结果.png

• 并列选择器

  • "标签名"+“，”+".类名"找到标签
  • 类选择器格式：标签名，.类名

    eg:
    ​    ​<p class="high">第一段文字</p>
        <p>第二段文字</p>
        <div class="high">div1</div>
        <div>div2</div>

   div， .high  {
        color：red;
    }

结果：

结果.png

• 复合选择器

复合选择器.png

• 后代选择器

后代选择器.png

• 直接后代选择器

  
  
  直接后代选择器.png

• 相邻兄弟选择器

  
  
  相邻兄弟选择器.png

• 属性后代选择器

  
  
  
  
  
  
  属性后代选择器.png