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

最新推荐文章于 2023-11-17 12:43:35 发布

conkeyn

最新推荐文章于 2023-11-17 12:43:35 发布

阅读量135

点赞数

分类专栏： CSS 文章标签： XHTML CSS HTML

本文链接：https://blog.csdn.net/conkeyn/article/details/83391060

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

属性值选择器

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

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” 的所有元素。根据属性值中出现的一个用空格分隔的词来完成选择。

conkeyn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第2章选择器 =>属性值选择器 P46

属性值选择器除了可以选择有某些属性的元素外，还可以进一步缩小选择范围，只选择有特定属性值的元素。1、可以根据具体的属性值选择；2、可以根据部分属性值选择； 1、根据具体属性值选择&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org...
复制链接

扫一扫