2.3.1 class selector用法1：為了配合class selector的使用，文檔要有相應的標識。<p class="warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p> <p>With plutonium, <span class="warning">the possibility of implosion is very real, and must be avoided at all costs</span>. This can be accomplished by keeping the various masses separate.</p> 為了配合不同元素中的warning，css定義為：*.warning {font-weight: bold;}可簡寫為：.warning {font-weight: bold;}用法2：class selector通過直接引用一個元素的class屬性中的值來產生作用。通常，引用之前有一個點號“.”，該點號表明這是一個class selector。該點號將class selector和與其他可以組合在一起的東西分割開來，比如element selector。下例：
p.warning {font-weight: bold;}意為：該selector與任何具有class屬性的p元素相匹配。用法3：將class selector和針對特定元素的class selector混合使用。例如
.warning {font-style: italic;}span.warning {font-weight: bold;}
意為：除了span，所有的warining將設為italic。2.3.1.1 multiple classes一個元素可以指定一個class來確定其顯示方式，也可以指定多個class。如下：<p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>上例中的p指定了兩個class。下面的css片斷可以適用：.warning.urgent {background: silver;}上面的css片斷指定了warning和urgent兩個class，實際是指定了一個class組合。任何元素的屬性class中出現了warning和urgent的，不論順序都有效，即出現的class都在組合中。但是如果在class屬性值的列表中，出現的多個class不屬於任何以定義的一個組合時，錯誤。但是允許只出現某個組合中的所有class中的部分class。 2．3．2 id selectorsid selectors類型class selectors，區別在於：id selector中以“#”代替“.”id selector根據元素中的id屬性來過濾。一個例子：*#lead-para {font-weight: bold;}類似於：*.lead-para {font-weight: bold;}因此可以簡寫為：#lead-para {font-weight: bold;}一個例子：<p id="lead-para">This paragraph will be boldfaced.</p> <p>This paragraph will NOT be bold.</p> 2．3．3 class selector和id selector之間的選取1class可以在任意數目的elements中使用。Id在一個html文檔中只能使用一次。即如果一個element使用了某id，在該文檔中其他element就不能使用該id了。 但是，對很多瀏覽器而言，如果html文檔違反上述規定卻是可以容忍的，依然正確顯示。然而帶來的問題是跟DOM相關的操作就會出錯。比如getElementById認為文檔中只有一個element的id是給定值。2id selectors不能像class selectors那樣具有組合的形式。3在純文法的角度來看，dot-class的形式（如，“.warning”），xml文檔不識別。而hash-ID的形式可以被任意文檔html，svg，mathml，xml識別。4當用來決定某個給定的element使用的style的時候，id比class顯得更重量級heavier weight。 另外，class和id selector是大小寫敏感的。 2．4 attribute selectors從class和id selectors的使用中可以看到，我們是通過具有某個值的屬性來選擇元素的。上面所談到的class和id selectors只對html，svg，mathml適用，然而在其他標記語言mackup language中可能是不適用的。Css2對此情況，引入attribute selectors。Attribute selectors基於屬性和屬性的值來選擇元素。一共有四類attribute selectors。但是attribute selectors不被ie6/win支援，被opera和gecko支援。Ie7也似乎不支援。 2．4．1 簡單屬性選擇如果想根據屬性來選擇元素，而不關注屬性的值，就可以使用simple attribute selector。
如，h1[class] {color: silver;} 定義了所有具有class屬性的h1元素的style，不論其class的具體取值。So given the following markup:<h1 class="hoopla">Hello</h1> <h1 class="severe">Serenity</h1> <h1 class="fancy">Fooling</h1> 又，*[title] {font-weight: bold;}所有具體title屬性的所有元素的style。又，多選的情況a[href][title] {font-weight: bold;}同時具體href和title屬性的a元素的style。 2．4．2 基於具體屬性值的選擇選擇具有某特定取值的某屬性的元素，如a[href="http://www.css-discuss.org/about.html"] {font-weight: bold;}所有href屬性值為http://www.css-discuss.org/about.html的a元素的style。 同樣存在多選，a[href="http://www.w3.org/"][title="W3C Home"] {font-size: 200%;} 2．4．3 基於部分屬性值的選擇上一節根據屬性值選擇時，對屬性值的使用是完全符合的策略，為了實現部分匹配的策略，如下：p[class~="warning"] {font-weight: bold;}部分匹配的意思是包含，不存在以warning開頭或結尾的匹配方式。 2．4．4 特定屬性選擇*[lang|="en"] {color: white;}任何等於en或以en-開頭的lang屬性值對於的element的style。如果存在一組列相關的屬性值，就將其定義為xxx-?的形式，xxx是固定的，?用來區別各個不同的屬性。比如定義一組圖片的名字為pic-1.jpg,pic-2.jpg。那麼img[src|="pic"]就可以用來選出這組圖片中的所有圖片。 2．5 使用文檔結構css之所以很強大是因為它利用html文檔的結構來決定文檔中的元素的style。這不是css利用html文檔的唯一方式。為了理解這一點，先來看看html文檔的結構。 2．5．1 理解父子關係parent-child relationship先看一段html<html> <head> <base href="http://www.meerkat.web/"> <title>Meerkat Central</title> </head> <body> <h1>Meerkat <em>Central</em></h1> <p> Welcome to Meerkat <em>Central</em>, the <strong>best meerkat web site on <a href="inet.html">the <em>entire</em> Internet</a></strong>!</p> <ul> <li>We offer: <ul> <li><strong>Detailed information</strong> on how to adopt a meerkat</li> <li>Tips for living with a meerkat</li> <li><em>Fun</em> things to do with a meerkat, including: <ol> <li>Playing fetch</li> <li>Digging for food</li> <li>Hide and seek</li> </ol> </li> </ul> </li> <li>...and so much more!</li> </ul> <p> Questions? <a href="mailto:suricate@meerkat.web">Contact us!</a> </p> </body> </html> css所表現出來的強大是基於元素的父子關係的。Html文檔的元素是等級式的hierarchy，可以用樹的結構來表示。父子關係就是祖先和後代關係的特例。 2．5．2 descendant selectorsdescendant selector利用了html模型的樹型關係，可以找到某元素的特定後代元素。如，h1 em {color: gray;}做為h1元素的後代的所有em元素。 2．5．3 選擇子項目如果只選擇子項目，使用“>”如下：h1 > strong {color: red;}一個複雜的，結合class selector的例子：table.summary td > pclass屬性為summary的table元素的後代中的p元素，且p元素的父元素是td。 2．5．4 選擇臨近的兄弟元素利用+，如：h1 + p {margin-top: 0;}緊跟h1的元素，並且是p的兄弟元素。li+li只能選中ol下面第二，三個li，ul下面第二，三個li。如下：ol+ul{}可以選出ul下所有三個li。 W3c的定義：Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2. http://www.yiyeqiu.com/css/200609_53431.html 選擇緊貼在對象E1之後的所有E2對象。E2和E1對象在文檔目錄結構樹（DOM）中有共同的父物件。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
