2022.4.6 属性选择器

属性选择器（常用）

id + 类 结合

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>属性选择器</title>
 6  ​
 7      <style>
 8          /* demo下的所有a标签*/
 9          .demo a{
10              float: left;
11              display: block;
12              height: 50px;
13              width: 50px;
14              border-radius: 10px;
15              background: #2700ff;
16              text-align: center;
17              color: gainsboro;
18              text-decoration: none;
19              margin-right: 5px;
20              font: bold 20px/50px Arial;
21          }
22          /*[]中可以是属性名、属性名=属性值(可以是正则表达式)
23           = 绝对等于
24          *= 包含这个属性值
25          ^= 以这个开头
26          $= 以这个结尾
27           */
28  ​
29          /*a标签中带有id属性的          1变*/
30          a[id]{
31              background: yellow;
32          }
33          /*a标签中id=first的          不带引号， id只能唯一    1变*/
34          a[id=first]{
35              background: blue;
36          }
37          /*a标签中class属性中包含links的     带引号，class有多个      全部变 */
38          a[class*="links"]{
39              background: yellowgreen;
40          }
41          /*a标签中href属性以http开头的    12变*/
42          a[href^=http]{
43              background: #5dff4c;
44          }
45          /*a标签中href属性以pdf开头的    78变*/
46          a[href$=pdf]{
47              background: #5dff4c;
48          }
49  ​
50      </style>
51  ​
52  </head>
53  <body>
54  <p class="demo">
55      <a href="http://www.baidu.com" class="links item first" id="first">1</a>
56      <a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
57      <a href="images/123.html" class="links item">3</a>
58      <a href="images/123.png" class="links item">4</a>
59      <a href="images/123.jpg" class="links item">5</a>
60      <a href="abc" class="links item">6</a>
61      <a href="/a.pdf" class="links item">7</a>
62      <a href="/abc.pdf" class="links item">8</a>
63      <a href="abc.doc" class="links item">9</a>
64      <a href="abcd.doc" class="links item last">10</a>
65  </p>
66  </body>
67  </html>
posted @ 2022-04-07 17:25  暴躁C语言  阅读(128)  评论(0)    收藏  举报