第2章选择器 =>属性值选择器 P46

conkeyn

浏览: 1522955 次
性别:
来自: 厦门

最近访客更多访客>>

fuyun10036

yl4257891

ja_1991

chenzehe

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

XHTML CSS HTML

属性值选择器

除了可以选择有某些属性的元素外，还可以进一步缩小选择范围，只选择有特定属性值的元素。

1、可以根据具体的属性值选择；

2、可以根据部分属性值选择；

1、根据具体属性值选择

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>根据具体属性值选择</title>
<style type="text/css">
a[href="http://www.w3.org/"][title="W3C Home"]{
	font-size:200%;	
}
</style>
</head>

<body>
<p>1、<a href="http://www.w3.org/" >W3C Home</a></p>
<p>2、<a href="http://www.w3.org/" title="W3C Home">W3C Home</a></p>
<p>3、<a href="#" title="W3C Home">W3C Home</a></p>
<p>4、<a href="http://www.w3.org" title="W3C Home">W3C Home</a></p>
</body>
</html>

显示效果：

注意，这种格式要求必须与属性值完全匹配。如果遇到的值本身包含一个用空格分隔的值列表达，匹配就会出问题。例如，考虑以下标记片段：

<planet type="barren rocky">Mercury</planet>

要根据具体属性值匹配这个元素，唯一的办法就是写作：

planet[type="barren rocky"]{font-weight:blod;}

示例3：

<p class="urgent warning">When handling plutonium,care must be taken to avoid the formation of a critaical mass.</p>

要根据具体属性值来选择这个元素，必须写作：p[class="urgent warning"]{font-weight:blod;}

这不同于多类选择器（class中的属性值与顺序无关），需要完全匹配。

//==================================================

2、根据部分属性值选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>根据部分属性值选择器/title>
<style type="text/css">
span[class~="barren"]{
	font-style:italic;
}
</style>
</head>

<body>
<p>1、<span class="barren rocky"


>Mercury</span></p>
<p>2、
  <span class="cloudy barren"


>Venue</span></p>
<p>3、
  <span class="life-bearing cloudy">Jason</span></p>
  <p>4、
  <span class="one-barren cloudy"


>Tom</span></p>
</body>
</html>

显示效果：

请注意代码与显示效果的差别，红色的class="on-barren cloudy"将不匹配，也就是说用空格将"on-barren cloudy"分隔开之后出现"on-barren"和"cloudy"子串，与"barren"不匹配。

注意，选择器中出现了一个波浪号（~）。这正是部分选择的关键，即根据属性值中出现的一个用空格分隔的词来完成选择。如果忽略了这个波浪号，就变了完全值匹配。

类型	描述
[foo^=”bar”]	选择 foo 属性值以 ”bar” 开头的所有元素
[foo$=”bar”]	选择 foo 属性值以 ”bar” 结尾的所有元素
[foo*=”bar”]	选择 foo 属性值包含子串 ”bar” 的所有元素
[foo~=”bar”]	选择 foo 属性值先使用空格分隔开，其中包含子串 ”bar” 的所有元素。根据属性值中出现的一个用空格分隔的词来完成选择。

查看图片附件

分享到：

第2章选择器 =>特定属性选择类型 P49 | 第2章选择器 =>简单的属性选择器 P44

2009-04-26 23:05
浏览 1001
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论