CSS中的属性选择器允许你根据元素的属性和属性值来选择元素。这种选择器提供了非常灵活的方式来定位页面上的特定元素。

以下是属性选择器的一些常见用法：

1、存在属性选择器

选择具有指定属性的所有元素。

css
[attribute] {  
    /* styles */  
}

2、属性值选择器

选择具有指定属性及该属性值为特定值的所有元素。

css
[attribute=value] {  
    /* styles */  
}

3、属性值前缀选择器

选择属性值以特定字符串开头的所有元素。

css
[attribute^=value] {  
    /* styles */  
}

4、属性值后缀选择器

选择属性值以特定字符串结尾的所有元素。

css
[attribute$=value] {  
    /* styles */  
}

5、属性值包含选择器

选择属性值中包含特定字符串的所有元素。

css
[attribute*=value] {  
    /* styles */  
}

6、属性值子串选择器（用于检查属性值中是否包含某个子串）

选择具有用空格分隔的值列表的属性，并且列表中有一个值恰好等于指定值的元素。注意，这里的“值”是由空格分隔的，并且完全匹配。

css
[attribute~=value] {  
    /* styles */  
}

下面是一些具体的例子：

css
/* 选择所有带有href属性的a元素：*/
a[href] {  
  color: blue;  
}

/* 选择input元素，其type属性值为text：*/
input[type="text"] {  
  width: 200px;  
}

/* 选择div元素，其class属性值以my-开头的： */
div[class^="my-"] {  
  background-color: lightgray;  
}

/* 选择img元素，其alt属性值中包含logo的：*/
img[alt*="logo"] {  
  border: 1px solid black;  
}