2.2.6  屬性選擇器

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

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

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

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

注意：

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

2.2.7  通用選擇器

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

* { border:1px solid green; }

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

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

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

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

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

(3) 找到第(2)步中返回的對(duì)象的所有p子元素，因?yàn)檫@是分組中的最后一個(gè)選擇器，因此找到了第(2)步中返回的對(duì)象的所有p子元素和子子元素等。

(4) 將{和}符號(hào)中的樣式應(yīng)用到第(3)步返回的對(duì)象。

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

2.2.8  群組選擇器

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

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