属性选择器（重要，常用） 

a[]{}    标签 [属性名=属性值(正则)]
= 绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .demo a{
 8             float: left;
 9             display: block;
10             height: 50px;
11             width: 50px;
12             border-radius: 10px;
13             background: deepskyblue;
14             text-align: center;
15             color: grey;
16             text-decoration: none;
17             margin-right: 5px;
18             font: bold 20px/50px Arial;
19         }
20         /*存在id属性的元素
21         a[]{}    标签 [属性名=属性值(正则)]
22         = 绝对等于
23         *=包含这个元素
24         ^=以这个开头
25         $=以这个结尾
26         */
27         /*a[id]{*/
28         /*    background: yellow;*/
29         /*}*/
30 
31         /*a[id=first]{*/
32         /*    background: yellow;*/
33         /*}*/
34 
35         /*class中有links的元素*/
36         a[class*="links"]{
37             background: #3cbda6;
38         }
39         /*选中href属性以http开头的元素
40 
41         */
42         a[href^=http]{
43             background: yellow;
44         }
45         a[href$=pdf]{
46             background: salmon;
47         }
48 
49     </style>
50 </head>
51 <body>
52 
53 <p class="demo">
54     <a href="http://www.baidu.com" class="links item first" id="first">1</a>
55     <a href="http://www.nihao.com" class="links item active" target="_blank" title="test">2</a>
56     <a href="images/123.html" class="links item" >3</a>
57     <a href="images/123.png" class="links item">4</a>
58     <a href="images/123.jpg" class="links item">5</a>
59     <a href="abc" class="links item">6</a>
60     <a href="/a.pdf" class="links item">7</a>
61     <a href="/abc.pdf" class="links item">8</a>
62     <a href="abc.doc" class="links item">9</a>
63     <a href="abcd.doc" class="links item last">10</a>
64 </p>
65 
66 </body>
67 </html>

 

posted @ 2022-03-27 21:19  doremi429  阅读(55)  评论(0)    收藏  举报