css3新增选择器（2）

1、查找属性值

<p>
  <a href="">百度</a>
</p>
<p>
  <a title="标题">百度</a>
</p>

css：

a[href] {
  font-size: 30px;
  color: aqua;
}

a[title] {
  font-size: 30px;
  color: red;
}

代码演示：

2、查找带有指定属性和值的元素—title=“百度一下”

<p><a href="https://www.baidu.com">百度一下</a></p>
<p><a href="https://www.baidu.com" title="百度一下">百度一下</a></p>
<p><a href="https://www.baidu.com">百度一下</a></p>
<p><a href="https://www.baidu.com" title="百度一下">百度一下</a></p>

css：

a[title='百度一下']{ color: bisque; font-size: 30px; }

代码演示：

3、 ^查找指定属性和值以指定某个内容开头的元素

<p><a href="http://www.baidu.com">百度一下</a></p>

css：

a[href^="http:"]{ color: blue; font-size: 40px; }

代码演示：

4、$ 查找指定属性和值，代表查找结束的字符

<p><a href="https://www.bilibili.com/">B站</a></p>
<p><a href="https://www.bilibili.com">B站2</a></p>

css:

a[href$="com/"]{ font-size: 50px; color: blueviolet; }

代码演示：

5、* 查找其中值包含的字符

<p><a href="https://fanyi.baidu.com/">百度翻译</a></p>

css：

a[href*="fanyi"]{ font-size: 70px; color: chartreuse; }

代码演示：