*选择器包含于~包含后什么不同吗？

首页课程实战体系课手记专栏慕课教程

*选择器包含于~包含后什么不同吗？

来源：2-7 属性选择器

von_colonel

2017-07-06 14:41:31

比如a[href*="#"]{}与a[href~="#"]{}有什么不同

写回答

1回答

小丸子爱吃菜

2017-07-06

已采纳

1、[attribute~=value] 选择器用于选取属性值中包含指定词汇的元素。

比如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    [title~=flower] {
        border:2px solid red;
    }
    </style>
</head>

<body>
    <a title="tulip_flower">链接1</a>
    <a title="flower">链接2</a>
</body>
</html>

2、[attribute*=value] 选择器匹配属性值包含指定值的每个元素。

比如：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
    div[class*="test"] {
        background: #ffff00;
    }
    </style>
</head>

<body>
    <div class="first_test">第一个 div 元素。</div>
    <div class="second">第二个 div 元素。</div>
    <div class="test">第三个 div 元素。</div>
    <p class="test">这是段落中的文本。</p>
</body>

</html>

自己运行一下代码，就明白了。

祝学习愉快！

hon_colonel

h 非常感谢！

h017-07-07

共1条回复

0 学习 · 5012 问题

查看课程

相似问题

第五个为什么不会变红？不是包含one吗？这个选择器不是选取包含的吗

回答 1

关于~=包含