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>
  1. E[attr] :只使用属性名,但没有确定任何属性值;
  2. E[attr="value"] :指定属性名,并指定了该属性的属性值;必须完全匹配,a[class="links"]不能匹配<a class="links items></a>
  3. E[attr~="value"] :指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写;title="site xxx"
  4. E[attr*="value"] :指定了属性名,并且有属性值,而且属值中包含了value;title="sitexxx"
  5. E[attr$="value"] :指定了属性名,并且有属性值,而且属性值是以value结束的;
  6. E[attr^="value"] :指定了属性名,并且有属性值,属性值是以value开头的;
  7. E[attr|="value"] :指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);
发布了430 篇原创文章 · 获赞 415 · 访问量 925万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览