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>

 

优先级

id>class>标签>*

#>.>标签>*

转载于:https://www.cnblogs.com/navyouth/p/7643135.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值