详解CSS3中属性选择器新增加的特性

CSS3中属性选择器是一种很方便的选择器，允许开发者根据元素的属性来选择对应的元素并进行样式定义。CSS3新增加的属性选择器包含了很多新特性，本文将详细讲解这些新特性及其使用方法。

1. 普通属性选择器

在CSS3中，最常用的属性选择器是普通的属性选择器，它可以根据元素的属性选择对应的元素。其格式如下：

[attribute]

其中，attribute是用来匹配的属性名。比如，我们可以给所有的带有title属性的a标签添加一个虚线边框：

a[title] {
    border: 1px dotted;
}

这样就会将所有带有title属性的a标签添加一个虚线边框。

2. 属性值选择器

除了普通的属性选择器，CSS3还增加了属性值选择器。属性值选择器可以根据元素的属性值来选择对应的元素。其格式如下：

[attribute=value]

其中，value是属性的值。比如，我们可以给所有type属性为text的input标签添加一个灰色背景色：

input[type=text] {
    background-color: #ccc;
}

这样就会将所有type属性为text的input标签添加灰色背景色。

3. 子串匹配属性选择器

CSS3中还新增加了一些子串匹配属性选择器，可以选择包含特定子串的元素。这些属性选择器均以*=为前缀，具体如下：

• [attribute*=value]：选择attribute属性包含value子串的元素；
• [attribute^=value]：选择attribute属性以value子串开头的元素；
• [attribute$=value]：选择attribute属性以value子串结尾的元素。

以[attribute*=value]为例，我们可以选择所有href属性中包含example这个子串的a标签，并将它们的颜色设置为红色：

a[href*=example] {
    color: red;
}

这样就会将所有href属性中包含example这个子串的a标签颜色设置为红色。

以上就是CSS3中新增加的属性选择器特性及其使用方法的详细攻略。