CSS选择器详解-优快云博客

1、标签选择器，用标签做选择

例如： div{color:#00F} p{color:#0F0}

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        div{color:#00F}
        p{color:#0F0}
        </style>
    </head>
    <body>
      <div >更好发挥的返回结果还
      </div>   
      <p>豆腐干山豆根很舒服</p>
      <p>身体还是身体</p>
    </body>

2、class选择器是.开头

例如： .sss{color:#F39}

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        .sss{color:#F39}
        </style>
    </head>
    <body>
      <div class="ssss">更好发挥的返回结果还 <!--class样式-->
      </div>   
      <p>豆腐干山豆根很舒服</p>
      <p>身体还是身体</p>
    </body>

3、id选择器以#开头、

例如：#www{color:#F39}

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        #www{color:#F39}
        </style>
    </head>
    <body>
      <div >更好发挥的返回结果还   
      </div>   
      <p id="www">豆腐干山豆根很舒服</p>   <!--id样式-->
      <p>身体还是身体</p>
    </body>

4、复合选择器

1）、用，隔开表示并列

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        div,p{color:#F39}
        </style>
    </head>
    <body>
      <div >更好发挥的返回结果还
      </div>   
      <p >豆腐干山豆根很舒服</p>
      <p>身体还是身体</p>
    </body>

2）、用空格隔开，表示下一级

例如：div {color:#F39}

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        div {color:#F39}
        </style>
    </head>
    <body>
      <div ><p>更好发挥的返回结果还</p>
      </div>   
      <p >豆腐干山豆根很舒服</p>
      <p>身体还是身体</p>
    </body>

3）、筛选.

例如：<p>中所有class是sss的

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        .sss{color:#F39}
        </style>
    </head>
    <body>
      <div ><p>更好发挥的返回结果还</p>
      </div>   
      <p class="sss">豆腐干山豆根很舒服</p>
      <p>身体还是身体</p>
      <p>防守对方法务</p>
      <p class="sss">委托人</p>
      <p>问题我</p>
      <p class="sss">让他 </p>
    </body>

5)所有*

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        *{color:#F39}
        </style>
    </head>
    <body>
      <div ><p>更好发挥的返回结果还</p>
      </div>   
      <p >豆腐干山豆根很舒服</p>
      <p>身体还是身体</p>
      <p>防守对方法务</p>
      <p >委托人</p>
      <p>问题我</p>
      <p >让他 </p>
    </body>