css 选择器

/*大浪淘沙始见金*/

/*css选择器*/

---

---

• 说明
  • css选择器极简单,只要按照以下步骤测试完毕即可学会
  •        本文只用于学习交流,若有疑问请联系作者
• 提供外部链接:此链接用于测试下列代码:
  • 在线编辑器
   

 

• id选择器
  • 　　示例

  • <style>
    #chensang
    {
        text-align:center;
        color:red;
    } 
    </style>
    <p id="chensang">你好,陈桑!</p>
    <p>这个段落不受该样式的影响。</p>

 

•  class类选择器
  •        示例

  • <style>
    .chensang
    {
        text-align:center;
        color:red;
    } 
    </style>
    <p class="chensang">你好,陈桑!</p>
    <p>这个段落不受该样式的影响。</p>

     

• 标签选择器(所有标签)
  
  • 　　示例

  • <style>
    p
    {
        text-align:center;
        color:red;
    } 
    </style>
    <p class="chensang">你好,陈桑!</p>
    

 

• 包含选择器(所有后代)
  • 　　示例

  • <style>
    p{
      color:red;
    }
    div p{
      color:yellow;
    }
    </style>
    <p>你好,陈桑!</p><!--红色的-->
    <div>
      <p>你好,陈桑!</p><!--黄色的-->
    　<a><p>你好,陈桑!</p></a><!--黄色的-->
    </div>

 

• 子选择器(直接后代)
  • 　　示例

  • <style>
    p{
      color:red;
    }
    div>p{
      color:yellow;
    }
    </style>
    <p>你好,陈桑!</p><!--红色的-->
    <div>
      <p>你好,陈桑!</p><!--黄色的-->
    　<a><p>你好,陈桑!</p></a><!--红色的-->
    </div>

　　　　　　

• 兄弟选择器
  • 　　示例

  • <style>
    div~p{
      color:red;
    }
    </style>
    <p>你好,陈桑!</p>
    <div>
      <p>你好,陈桑!</p>
      <div>====</div>
    　<p>你好,陈桑!</p><!--红色的-->
      <p>你好,陈桑!</p><!--红色的-->
    </div>