CSS的属性选择器

最新推荐文章于 2024-03-31 14:47:03 发布

全栈小李

最新推荐文章于 2024-03-31 14:47:03 发布

阅读量1.3k

点赞数 2

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_45162683/article/details/113006659

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

属性选择器（常用）

      *= 包含等于
      ^= 以这个开头的
      $= 以这个结尾
 格式： 例如：
     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>