CSS（4）属性选择器（常用）

时间：2021-06-25 09:51:03 阅读：25 评论：0 收藏：0 [点我收藏+]

属性选择器（常用）

= -->绝对等于 *= -->包含 ^= -->以开头 $= -->以结尾

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>index</title>
 ?
   <style>
 ?
     .demo a{
       float: left;
       display: block;
       height: 50px;
       width: 50px;
       border-radius: 30px;
       background: #4a78c2;
       text-align: center;
       color: #555555;
       text-decoration: none;
       margin-right: 10px;
       font: bold 20px/50px 宋体;
     }
 ?
     /* 属性名， 属性名 = 属性值（正则）
       =   -->绝对等于
       *=  -->包含
       ^=  -->以开头
       $=  -->以结尾
     */
     /* 存在id属性的元素  a[]{} -->*/
     /*a[id]{
       background: #e37373;
     }*/
 ?
     /* id = first的元素 */
     /*a[id=first]{
       background: #c3d23b;
     }*/
 ?
     /*class中有links的元素*/
     /*a[class*="links"]{
       background: #ecf3f3;
     }*/
 ?
     /*选中href中以http开头的元素*/
     /*a[href^=http]{
       background: #222222;
     }*/
 ?
     /*选中href中以pdf结尾的元素*/
     /*a[href$=pdf]{
       background: forestgreen;
     }*/
 ?
   </style>
 ?
 </head>
 <body>
 ?
 <p class="demo">
   <a href="https://www.baidu.com/?tn=40020637_5_oem_dg" class="links item first" id="first">1</a>
   <a href="https://www.cnblogs.com/" class="links item active" target="_blank" title="test">2</a>
   <a href="https://www.cnblogs.com/qqyzml/" class="links item">3</a>
   <a href="images/123.html" class="links item">4</a>
   <a href="images/123.png" class="links item">5</a>
   <a href="https://www.bilibili.com/" class="links item">6</a>
   <a href="images/123.jpg" class="links item">7</a>
   <a href="/a.pdf" class="links item">8</a>
   <a href="/abc.pdf" class="links item">9</a>
   <a href="/abc" class="links item">10</a>
 </p>
 ?
 </body>
 </html>

CSS（4）属性选择器（常用）

原文：https://www.cnblogs.com/qqyzml/p/14929041.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)