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>
