CSS的属性选择器

属性选择器(常用)

 ​     *= 包含等于
 ​     ^= 以这个开头的
 ​     $= 以这个结尾
 格式: 例如:
     a[href$=gif]{
         background: black;
      }
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>属性选择器</title>
 </head>
  <style>
      .demo a{
          float: left;
          display: block;
          height: 50px;
          width: 50px;
          background: chartreuse;
          border-radius: 25px;
          text-align: center;
          text-decoration: none;
          margin-right: 10px;
          font:bold 25px/50px Arial;
 
      }
      /*属性选择器
      = 直接等于
      *= 包含等于
      ^= 以这个开头的
      $= 以这个结尾
      */
      /*a[id=bbb]{*/
      /*    background: #ff00a1;*/
      /*}*/
      /*a[class*=item]{*/
      /*    background: red;*/
      /*}*/
      /*a[href^=img]{*/
      /*    background: yellow;*/
      /*}*/
      a[href$=gif]{
         background: black;
      }
 
 
  </style>
 <body>
 
 <p class="demo">
     <a href="ww.baidu.com" class="first item aaa" id="bbb">1</a>
     <a href="img/123.html" class="first item" id="cc">2</a>
     <a href="img/123.txt" class="first item1" >3</a>
     <a href="img/123.xml"class="first item" >4</a>
     <a href="abc" class="first item">5</a>
     <a href="bda.txt" class="first item1">6</a>
     <a href="aaa.zip" class="first item">7</a>
     <a href=dasfja.jpg class="first item">8</a>
     <a href="werwerw.doc" class="first item">9</a>
     <a href="werwe.gif" class="last item1">10</a>
 </p>
 
 
 </body>
 </html>
  • 效果
    在这里插入图片描述
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值