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 selectors
id 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之間的選取
1
class可以在任意數目的elements中使用。
Id在一個html文檔中只能使用一次。即如果一個element使用了某id，在該文檔中其
他element就不能使用該id了。
但是，對很多瀏覽器而言，如果html文檔違反上述規定卻是可以容忍的，依然正確顯
示。然而帶來的問題是跟DOM相關的操作就會出錯。比如getElementById認為文檔中只有一個element的id是給定值。
2
id 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[] {font-weight: bold;}
同樣存在多選，
a[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 >
<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 selectors
descendant selector利用了html模型的樹型關系，可以找到某元素的特定后代元素。如，
h1 em {color: gray;}
做為h1元素的后代的所有em元素。
2．5．3 選擇子元素
如果只選擇子元素，使用“>”如下：
h1 > strong {color: red;}
一個復雜的，結合class selector的例子：
table.summary
td
>
p
class屬性為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.
選擇緊貼在對象E1之后的所有E2對象。E2和E1對象在文檔目錄結構樹（DOM）中有共同的父對象。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
