CSS属性选择器是CSS3中引入的一种新的选择器，它可以根据指定的属性和值来选择元素。CSS属性选择器有5种，分别是~=、|=、^=、$=、*=。
~=
~=（包含）是CSS属性选择器中最常用的一种，它可以用来选择指定属性值中包含某个特定值的元素，语法格式如下：
[属性~="值"]
例如，要选择class属性值中包含“test”的元素，可以使用以下代码：
[class~="test"] {
/* CSS样式 */
}
|=
|=（以开头）是CSS属性选择器中也很常用的一种，它可以用来选择指定属性值以某个特定值开头的元素，语法格式如下：
[属性|="值"]
例如，要选择class属性值以“test”开头的元素，可以使用以下代码：
[class|="test"] {
/* CSS样式 */
}
^=
^=（以开头）是CSS属性选择器中也很常用的一种，它可以用来选择指定属性值以某个特定值开头的元素，语法格式如下：
[属性^="值"]
例如，要选择class属性值以“test”开头的元素，可以使用以下代码：
[class^="test"] {
/* CSS样式 */
}
$=
$=（以结尾）是CSS属性选择器中也很常用的一种，它可以用来选择指定属性值以某个特定值结尾的元素，语法格式如下：
[属性$="值"]
例如，要选择class属性值以“test”结尾的元素，可以使用以下代码：
[class$="test"] {
/* CSS样式 */
}
*=
*=（包含）是CSS属性选择器中也很常用的一种，它可以用来选择指定属性值中包含某个特定值的元素，语法格式如下：
[属性*="值"]
例如，要选择class属性值中包含“test”的元素，可以使用以下代码：
[class*="test"] {
/* CSS样式 */
}
CSS属性选择器可以根据指定的属性和值来选择元素，可以大大提高CSS的灵活性，提升网页的可用性。