2.2.6 属性选择器
许多HTML标记支持属性,使用这一类型选择器可避免使用ID和类选择器引用它们。例如,可直接以下列方式引用属性,将带有属性type='submit'的所有元素的宽度设置为100像素:
[type="submit"] { width:100px; }
如果希望缩小选择器的范围,例如只选择带有该属性的表单输入元素,则可使用下列规则:
form input[type="submit"] { width:100px; }
注意:
属性选择器也作用于ID和类,因此,[classs="classname"]的执行方式与ID选择器.classname一样(除了后者优先级更高)。同样,[id="idname"]等价于使用类选择器.idname。因此,前面带有(#)和(.)符号的类和ID选择器可视为属性选择器的简写形式,但有更高的优先级。
2.2.7 通用选择器
通配或通用选择器匹配任何元素,因此下列规则将应用于整个文档,使其所有元素有一个绿色边框:
* { border:1px solid green; }
因此,虽然不太可能单用*,但作为复合规则的一部分,它是非常强大的。例如,下列规则将应用与前面相同的样式,但只针对ID为boxout的元素的子元素中的所有段落,只要它们不是直接子元素:
#boxout * p {border:1px solid green; }
这里,#boxout后的第一个选择器是*符号,表示选择boxout对象中的所有元素。后面的p选择器缩小了选择范围,变为只应用于*选择器返回的元素的子元素中的段落(由p定义)。因此,这个CSS规则执行下列动作(其中,术语“对象”和“元素”可互换使用)。
(1) 找到ID为boxout的对象。
(2) 找到第(1)步中返回的对象的所有子元素。
(3) 找到第(2)步中返回的对象的所有p子元素,因为这是分组中的最后一个选择器,因此找到了第(2)步中返回的对象的所有p子元素和子子元素等。
(4) 将{和}符号中的样式应用到第(3)步返回的对象。
结果是绿色边框只应用于主元素的孙子元素(或曾孙元素等)中的段落。
2.2.8 群组选择器
使用CSS,可以同时将规则应用于多个元素、类或任何其他类型选择器(选择器间用逗号分隔)。例如,下列规则将在所有段落、ID为idname的元素和使用类classname的所有元素下方画虚线:
p, .idname, #classname { border-bottom:1px dotted orange; }