属性选择器的语法如下: [属性名] {样式} [属性名=属性值] {样式} [属性名~=属性值] {样式} [属性名|=属性值] {样式} [属性名^=属性值] {样式} [属性名$=属性值] {样式} [属性名*=属性值] {样式} 其中,[]表示属性选择器,属性名是要选择的属性名,属性值是要匹配的值。如果只写属性名,则表示选中具有该属性名的元素。属性名和属性值通过等号连接,表示只选中具有属性名和属性值相等的元素。如果使用~=,表示匹配包含指定值的属性,多个值之间用空格分隔。如果使用|=,表示只匹配以指定属性值开头的属性值,例如属性值为“en-US”或“en”都会被匹配到。如果使用^=,表示匹配以指定值开头的属性值,例如属性值为“example”和“example-1”均会被匹配到。如果使用$=,表示匹配以指定值结尾的属性值,例如属性值为“example”和“123example”均会被匹配到。如果使用*=,表示匹配包含指定值的属性值,例如属性值为“example”和“my-example”均会被匹配到。
以下是一些示例代码:
/*选中具有title属性的所有元素*/ [title] {color: red;} /*只选中title属性值为"hello"的元素*/ [title="hello"] {color: blue;} /*选中包含class属性值为"my-class"的所有元素*/ [class~="my-class"] {font-weight: bold;} /*只选中class属性值为"en"或带有"en-"前缀的元素*/ [class|="en"] {font-style: italic;} /*只选中id属性值以"example"开头的元素*/ [id^="example"] {text-decoration: underline;} /*只选中src属性值以".jpg"结尾的所有图片*/ [src$=".jpg"] {border: 1px solid black;} /*选中alt属性值包含"example"的所有图片*/ [alt*="example"] {opacity: 0.5;}
总的来说,CSS3属性选择器是一种十分实用的选择器,它可以帮助大家选中更加具体的元素并应用样式。