css学习(二) - 五爷

最新推荐文章于 2023-05-11 09:48:41 发布

最新推荐文章于 2023-05-11 09:48:41 发布 · 76 阅读

本文深入探讨了CSS选择器的工作原理及应用技巧，包括属性选择器、伪类选择器等高级特性，通过具体示例帮助读者更好地理解并运用这些选择器。

1 <html>
 2 <head>
 3     <style type="text/css">
 4         .demo{
 5             width: 300px;
 6             border: 1px solid #ccc;
 7             padding: 10px;
 8         }
 9         .demo a{
10             float: left;
11             display: block;
12             height: 20px;
13             width: 20px;
14             line-height: 20px;
15             text-align: center;
16             background-color: #f36;
17             color: green;
18             margin-right: 5px;
19             text-decoration: none;
20             -moz-border-radius:10px;
21             -webkit-border-radius:10px;
22             border-radius:10px;
23         }
24         .demo a[id]{
25             background-color: blue;
26             color: yellow;
27         }
28         .demo a[class="links"]{
29             background-color: yellow;
30         }
31         .demo a[title~="website"]{
32             background-color: yellow;
33         }
34         .demo a[href^="mailto:"]{
35             background:green;color:orange;
36         }
37         .demo a[href$=""]{
38             background-color: orange;
39         }
40         .demo a[title*="site"]{
41             background:black;color:white;
42         }
43         .demo a[lang|="zh"]{
44             background:gray;color:yellow;
45         }
46     </style>
47 </head>
48 <body>
49     <div class="demo clearfix">
50         <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
51         <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
52         <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
53         <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
54         <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
55         <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
56         <a href="" class="links item" title="open the website" lang="cn">7</a>
57         <a href="" class="links item" title="close the website" lang="en-zh">8</a>
58         <a href="" class="links item" title="http://www.sina.com">9</a>
59         <a href="" class="links item last" id="last">10</a>
60     </div>
61 </body>
62 </html>

E[attr]：只使用属性名，但没有确定任何属性值；
E[attr="value"]：指定属性名，并指定了该属性的属性值；必须完全匹配，a[class="links"]不能匹配<a class="links items></a>
E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；title="site xxx"
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；title="sitexxx"
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;