选择符属性选择符(Attribute Selectors)

更新时间：2024-12-23 08:25:52

属性选择符是CSS中一种用于筛选元素的语法，它允许我们基于元素的属性和属性值来应用特定的样式规则。其基本形式为:

E [ attr ] { sRules }

这个表示选择具有 attr 属性的元素 E，并为这些元素应用样式规则 sRules。例如，要将所有具有 title 属性的 h 标签的文本颜色设为蓝色，可以这样写：

h[title] { color: blue; }

另一种形式是:

E [ attr = value ] { sRules }

这会选取具有 attr 属性且属性值等于 value 的元素。例如，将所有 class 属性值为 "demo" 的 span 标签的文本颜色设为红色：

span[class=demo] { color: red; }

接下来的两种形式用于更复杂的匹配:

E [ attr ~= value ] { sRules }

这种选择器匹配具有 attr 属性且其属性值由空格分隔的词列表，其中至少有一个词与 value 匹配，value 不能包含空格。例如，如果你要匹配所有 class 以 "demonstration" 开头的 span，可以这样写：

span[class^=demonstration] { /* 样式规则 */ }

最后，

E [ attr |= value ] { sRules }

选择具有 attr 属性且其属性值包含由 value 分割的词列表的元素。value 作为词的开始部分匹配。例如，选择所有 class 属性值包含 "demo-" 的 span：

span[class*="demo-"] { /* 样式规则 */ }

扩展资料

通配选择符：选定文档目录树(DOM)中的所有类型的单一对象。假如通配选择符不是单一选择符中的唯一组成，“*”可以省略。