CSS [自定义？]属性

Question

radio[pane] {
 list-style-image: url("jar:resource:///chrome/classic.jar!
         /skin/classic/browser/preferences/Options.png");
}

radio[pane="prefpane-appearance"] {
 -moz-image-region: rect(0px, 32px, 32px, 0px);
}
radio[pane="prefpane-appearance"]:hover,
radio[pane="prefpane-appearance"][selected="true"] {
 -moz-image-region: rect(32px, 32px, 64px, 0px);
}

任何人都可以解释这个css的语法，尤其是pane。我在XUL的上下文中找不到无线电元素的这种属性。所以我猜这是一些自定义属性？如果是，那么它是如何通过线条演变的，首先是声明，然后是几个作业？它还有selected，这意味着可以有多个自定义属性？ 如何在以后使用这些属性？

Answer 1

括号选择器（[]）按属性选择。

以下内容匹配title属性设置为：

的任何图像

img[title] { /* stuff */ }

以下内容匹配src属性为foo.png的任何图片：

img[src="foo.png"] { /* stuff */ }

因此，您的示例规则分别匹配：

1. radio具有pane属性的元素;
设置了radio属性且等于pane的
2. prefpane-appearance个元素;
3. 悬停radio个pane属性设置的元素，等于prefpane-appearance;
4. radio个pane属性已设置且等于prefpane-appearance且其selected属性已设置且等于true的元素。