2.2.6  屬性選擇器

許多HTML標記支持屬性，使用這一類型選擇器可避免使用ID和類選擇器引用它們。例如，可直接以下列方式引用屬性，將帶有屬性type='submit'的所有元素的寬度設置為100像素：

[type="submit"] { width:100px; }

如果希望縮小選擇器的范圍，例如只選擇帶有該屬性的表單輸入元素，則可使用下列規(guī)則：

form input[type="submit"] { width:100px; }

注意：

屬性選擇器也作用于ID和類，因此，[classs="classname"]的執(zhí)行方式與ID選擇器.classname一樣(除了后者優(yōu)先級更高)。同樣，[id="idname"]等價于使用類選擇器.idname。因此，前面帶有(#)和(.)符號的類和ID選擇器可視為屬性選擇器的簡寫形式，但有更高的優(yōu)先級。

2.2.7  通用選擇器

通配或通用選擇器匹配任何元素，因此下列規(guī)則將應用于整個文檔，使其所有元素有一個綠色邊框：

* { border:1px solid green; }

因此，雖然不太可能單用*，但作為復合規(guī)則的一部分，它是非常強大的。例如，下列規(guī)則將應用與前面相同的樣式，但只針對ID為boxout的元素的子元素中的所有段落，只要它們不是直接子元素：

#boxout * p {border:1px solid green; }

這里，#boxout后的第一個選擇器是*符號，表示選擇boxout對象中的所有元素。后面的p選擇器縮小了選擇范圍，變?yōu)橹粦糜?選擇器返回的元素的子元素中的段落(由p定義)。因此，這個CSS規(guī)則執(zhí)行下列動作(其中，術語“對象”和“元素”可互換使用)。

(1) 找到ID為boxout的對象。

(2) 找到第(1)步中返回的對象的所有子元素。

(3) 找到第(2)步中返回的對象的所有p子元素，因為這是分組中的最后一個選擇器，因此找到了第(2)步中返回的對象的所有p子元素和子子元素等。

(4) 將{和}符號中的樣式應用到第(3)步返回的對象。

結果是綠色邊框只應用于主元素的孫子元素(或曾孫元素等)中的段落。

2.2.8  群組選擇器

使用CSS，可以同時將規(guī)則應用于多個元素、類或任何其他類型選擇器(選擇器間用逗號分隔)。例如，下列規(guī)則將在所有段落、ID為idname的元素和使用類classname的所有元素下方畫虛線：

p, .idname, #classname { border-bottom:1px dotted orange; }