CSS 笔记六（Image/Attribute Selectors）

Image Opacity / Transparency

The CSS opacity property is a part of the CSS3 recommendation.

Example

1 img {
2     opacity: 0.4;
3     filter: alpha(opacity=40); /* For IE8 and earlier */
4 }
5 
6 img:hover {
7     opacity: 1.0;
8     filter: alpha(opacity=100); /* For IE8 and earlier */
9 }

Image Sprites

An image sprite is a collection of images put into a single image.

Example

navigation images

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 #navlist {
 6     position: relative;
 7 }
 8 
 9 #navlist li {
10     margin: 0;
11     padding: 0;
12     list-style: none;
13     position: absolute;
14     top: 0;
15 }
16 
17 #navlist li, #navlist a {
18     height: 44px;
19     display: block;
20 }
21 
22 #home {
23     left: 0px;
24     width: 46px;
25     background: url('img_navsprites_hover.gif') 0 0;
26 }
27 
28 #prev {
29     left: 63px;
30     width: 43px;
31     background: url('img_navsprites_hover.gif') -47px 0;
32 }
33 
34 #next {
35     left: 129px;
36     width: 43px;
37     background: url('img_navsprites_hover.gif') -91px 0;
38 }
39 
40 #home a:hover {
41     background: url('img_navsprites_hover.gif') 0 -45px;
42 }
43 
44 #prev a:hover {
45     background: url('img_navsprites_hover.gif') -47px -45px;
46 }
47 
48 #next a:hover {
49     background: url('img_navsprites_hover.gif') -91px -45px;
50 }
51 </style>
52 </head>
53 <body>
54 
55 <ul id="navlist">
56   <li id="home"><a href="default.asp"></a></li>
57   <li id="prev"><a href="css_intro.asp"></a></li>
58   <li id="next"><a href="css_syntax.asp"></a></li>
59 </ul>
60 
61 </body>
62 </html>

CSS Attribute Selectors

Style HTML elements that have specific attributes or attribute values.

1> CSS [attribute] Selector

Used to select elements with a specified attribute.

2> CSS [attribute="value"] Selector

Used to select elements with a specified attribute and value.

Example

1 a[target] {
2     background-color: yellow;
3 } 
4 a[target="_blank"] {
5     background-color: blue;
6 }

3> CSS [attribute~="value"] Selector

Used to select elements with an attribute value containing a specified word.

4> CSS [attribute*="value"] Selector

Used to select elements whose attribute value contains a specified value.

 1 [title~=flower] {
 2     border: 5px solid yellow;
 3 }
 4 title="klematis flower"   > yes
 5 title="flower"            > yes
 6 title="tree_flower"       > no
 7 
 8 [class*="te"] {
 9     background: yellow;
10 }
11 class="first_test"        > yes
12 class="mytest"            > yes

5> CSS [attribute|="value"] Selector

Used to select elements with the specified attribute starting with the specified value.

6> CSS [attribute^="value"] Selector

Used to select elements whose attribute value begins with a specified value.

 1 [class|=top] {
 2     background: yellow;
 3 }
 4 class="top-header"    > yes
 5 class="top-text"      > yes
 6 class="topcontent"    > no
 7 
 8 [class^="top"] {
 9     background: yellow;
10 </style>
11 class="top-header"    > yes
12 class="top-text"      > yes
13 class="topcontent"    > yes

7> CSS [attribute$="value"] Selector

Used to select elements whose attribute value ends with a specified value.

1 [class$="test"] {
2     background: yellow;
3 }
4 class="first_test"      > yes    
5 class="my-test"         > yes