您的位置：首页 > Web前端 > CSS

CSS 笔记六（Image/Attribute Selectors）

2015-12-30 15:33 645 查看

Image Opacity / Transparency

The CSS

opacity

property is a part of the CSS3 recommendation.

Example

img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}

Image Sprites

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}

#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

#navlist li, #navlist a {
height: 44px;
display: block;
}

#home {
left: 0px;
width: 46px;
background: url('img_navsprites_hover.gif') 0 0;
}

#prev {
left: 63px;
width: 43px;
background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
left: 129px;
width: 43px;
background: url('img_navsprites_hover.gif') -91px 0;
}

#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>

<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</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

a[target] {
background-color: yellow;
}
a[target="_blank"] {
background-color: blue;
}

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.

[title~=flower] {
border: 5px solid yellow;
}
title="klematis flower"   > yes
title="flower"            > yes
title="tree_flower"       > no

[class*="te"] {
background: yellow;
}
class="first_test"        > yes
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.

[class|=top] {
background: yellow;
}
class="top-header"    > yes
class="top-text"      > yes
class="topcontent"    > no

[class^="top"] {
background: yellow;
</style>
class="top-header"    > yes
class="top-text"      > yes
class="topcontent"    > yes

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

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

[class$="test"] {
background: yellow;
}
class="first_test"      > yes
class="my-test"         > yes

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航