CSS选择器中[attribute~=value]与[attribute*=value]有什么区别？
以下是我在w3cschool找到的关于两种选择的例子．我尝试了将代码中的选择方式在这两个中切换，但显示的结果并没有变化：<!DOCTYPEhtml><html><head...
以下是我在w3cschool找到的关于两种选择的例子．我尝试了将代码中的选择方式在这两个中切换，但显示的结果并没有变化：
<!DOCTYPE html>
<html>
<head>
<style>
[title*="flower"]
{
border:5px solid yellow;
}
</style>
</head>
<body>
<p>title 属性中包含单词 "flower" 的图片会获得黄色边框。</p>
<img src="/i/eg_tulip.jpg" title="tulip flower" />
<br />
<img src="/i/shanghai_lupu_bridge.jpg" title="lupu bridge" />
<p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [attribute~=value]，必须声明 <!DOCTYPE>。</p>
</body>
</html>
这是例子的链接：http://www.w3school.com.cn/tiy/t.asp?f=css_sel_attribute_value_contains 展开
<!DOCTYPE html>
<html>
<head>
<style>
[title*="flower"]
{
border:5px solid yellow;
}
</style>
</head>
<body>
<p>title 属性中包含单词 "flower" 的图片会获得黄色边框。</p>
<img src="/i/eg_tulip.jpg" title="tulip flower" />
<br />
<img src="/i/shanghai_lupu_bridge.jpg" title="lupu bridge" />
<p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [attribute~=value]，必须声明 <!DOCTYPE>。</p>
</body>
</html>
这是例子的链接：http://www.w3school.com.cn/tiy/t.asp?f=css_sel_attribute_value_contains 展开
2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<style>
[title*="flower"]
{
border:5px solid yellow;
}
[title~="tulips"]
{
border:5px solid red;
}
</style>
</head>
<body>
<p>title 属性中包含单词 "flower" 的图片会获得黄色边框。</p>
<img src="images/baidu.png" title="tulip flower" />
<br />
<img src="images/baidu.png" title="lupu bridgeflower" /><br>
<img src="images/baidu.png" title="tulips flower" />
<br />
<img src="images/baidu.png" title="luputulips bridgeflower" />
<p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [attribute~=value]，必须声明 <!DOCTYPE>。</p>
</body>
</html>
[attribute~=value]，是指属性中必须包含value的单独单词，不能是单词的一分部。而[attribute*=value]是指属性中只要包含value这几个字母就可以，即使value为属性值的一部分字母也可以。
例如：title="luputulips bridgeflower"
可以被[title*="tulips"]选中，但不能被[title~="tulips"]选中。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
