属性选择器

2023年02月14日

柏拉文

越努力，越幸运

一、存否和值选择器

[attr] 匹配带有一个名为attr的属性的元素——方括号里的值。

语法

li[class] {
    font-size: 200%;
}

// 忽略大小写

li[class i] {
    font-size: 200%;
}

[attr=value] 匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。

语法

li[class="a"] {
    background-color: yellow;
}

// 忽略大小写 

li[class="a" i] {
    background-color: yellow;
}

[attr~=value] 匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。

语法

li[class~="a"] {
    color: red;
}

// 忽略大小写 

li[class~="a" i] {
    color: red;
}

[attr|=value] 匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。

[attr^=value] 匹配带有一个名为attr的属性的元素，其值开头为value子字符串。

语法

li[class^="a"] {
    font-size: 200%;
}

// 忽略大小写 

li[class^="a" i] {
    font-size: 200%;
}

[attr$=value] 匹配带有一个名为attr的属性的元素，其值结尾为value子字符串

语法

li[class$="a"] {
    background-color: yellow;
}

// 忽略大小写 

li[class$="a" i] {
    background-color: yellow;
}

[attr*=value] 匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。

语法

li[class*="a"] {
    color: red;
}

// 忽略大小写 

li[class*="a" i] {
    color: red;
}