CSS 選擇器
1贡茅、CSS 元素選擇器
如果設(shè)置 HTML 的樣式，選擇器通常將是某個 HTML 元素其做，比如 p顶考、h1、em妖泄、a驹沿，甚至可以是 html 本身。
<style type="text/css">
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
<h1>這是 heading 1</h1>
<h2>這是 heading 2</h2>
<p>這是一段普通的段落蹈胡。</p>
2渊季、CSS 選擇器分組
<style type="text/css">
/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}
</style>
<body>
<h1>這是 heading 1</h1>
<h2>這是 heading 2</h2>
<h3>這是 heading 3</h3>
<h4>這是 heading 4</h4>
<p>這是一段<b>普通</b>的段落文本。</p>
</body>
通配選擇器（universal selector）罚渐，顯示為一個星號（*）却汉。該選擇器可以與任何元素匹配，就像是一個通配符搅轿。
例如病涨，下面的規(guī)則可以使文檔中的每個元素都為紅色：
<style type="text/css">
* {color:red;}
</style>
<body>
<h1>這是 heading 1</h1>
<h2>這是 heading 2</h2>
<h3>這是 heading 3</h3>
<h4>這是 heading 4</h4>
<p>這是一段<b>普通</b>的段落文本。</p>
</body>
3璧坟、CSS 類選擇器
類選擇器允許以一種獨立于文檔元素的方式來指定樣式。
該選擇器可以單獨使用赎懦，也可以與其他元素結(jié)合使用雀鹃。
<style type="text/css">
p.important {color:red;}
h1.important {color:blue;}
</style>
<body>
<h1 class="important">This heading is very important.</h1>
<p class="important">This paragraph is very important.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
4、CSS ID 選擇器
ID 選擇器前面有一個 # 號 - 也稱為棋盤號或井號励两。
類選擇器和ID選擇器的區(qū)別
- 區(qū)別 1：只能在文檔中使用一次
與類不同黎茎，在一個 HTML 文檔中，ID 選擇器會使用一次当悔，而且僅一次傅瞻。 - 區(qū)別 2：不能使用 ID 詞列表
不同于類選擇器踢代，ID 選擇器不能結(jié)合使用，因為 ID 屬性不允許有以空格分隔的詞列表嗅骄。 - 區(qū)別 3：ID 能包含更多含義
類似于類胳挎，可以獨立于元素來選擇 ID。
5溺森、CSS 屬性選擇器
屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素慕爬。
[title]
{
color:red;
}
a[href]
{
color:red;
}
6、CSS 后代選擇器
注：兩個元素之間的層次間隔可以是無限的屏积。
例如医窿，如果寫作 ul em，這個語法就會選擇從 ul 元素繼承的所有 em 元素炊林，而不論 em 的嵌套層次多深姥卢。
7、CSS 子元素選擇器
與后代選擇器相比渣聚，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素隔显。
從右向左讀，選擇器 h1 > strong 可以解釋為“選擇作為 h1 元素子元素的所有 strong 元素”饵逐。
<style type="text/css">
h1 > strong {color:red;}
</style>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
8括眠、CSS 相鄰兄弟選擇器
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素倍权。
h1 + p {margin-top:50px;}
這個選擇器讀作：“選擇緊接在 h1 元素后出現(xiàn)的段落掷豺，h1 和 p 元素?fù)碛泄餐母冈亍薄?/p>
html > body table + ul {margin-top:20px;}
這個選擇器解釋為：選擇緊接在 table 元素后出現(xiàn)的所有兄弟 ul 元素，該 table 元素包含在一個 body 元素中薄声，body 元素本身是 html 元素的子元素当船。
用一個結(jié)合符只能選擇兩個相鄰兄弟中的第二個元素。
li + li {font-weight:bold;}
上面這個選擇器只會把列表中的第二個和第三個列表項變?yōu)榇煮w默辨。第一個列表項不受影響德频。
9、CSS偽類
偽類的語法：
selector:pseudo-class {property:value;}
CSS類也可以使用偽類：
selector.class:pseudo-class {property:value;}
CSS - :first - child偽類選擇元素的第一個子元素
<style type="text/css">
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
</style>
<body>
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
</body>
作為第一個元素的元素包括第一個 p缩幸、第一個 li 和 strong 和 em 元素壹置。
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
第一個規(guī)則將作為某元素第一個子元素的所有 p 元素設(shè)置為粗體。第二個規(guī)則將作為某個元素（在 HTML 中表谊，這肯定是 ol 或 ul 元素）第一個子元素的所有 li 元素變成大寫钞护。
- 例子 1 - 匹配第一個 < p > 元素
<head>
<style type="text/css">
p:first-child {
color: red;
}
</style>
<body>
<p>some text</p>
<p>some text</p>
</body>
- 例子 2 - 匹配所有 < p > 元素中的第一個 < i > 元素
<style type="text/css">
p > i:first-child {
font-weight:bold;
}
</style>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
- 例子 3 - 匹配所有作為第一個子元素的 < p > 元素中的所有 < i > 元素
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
CSS - :lang 偽類使你有能力為不同的語言定義特殊的規(guī)則
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在這個例子中,:lang定義了q元素的值為lang =“no”</p>
</body>
10、CSS 偽元素
CSS 偽元素用于向某些選擇器設(shè)置特殊效果爆办。
偽元素的語法：
selector:pseudo-element {property:value;}
CSS 類也可以與偽元素配合使用：
selector.class:pseudo-element {property:value;}
:first-line 偽元素用于向文本的首行設(shè)置特殊樣式难咕。只能用于塊級元素。
下面的屬性可應(yīng)用于 "first-line" 偽元素：
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
<style>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
<body>
<p>this is a demo</p>
</body>
:first-letter 偽元素用于向文本的首字母設(shè)置特殊樣式。用于塊級元素余佃。
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
<body>
<p>你可以使用 "first-letter" 偽元素向文本的首字母設(shè)置特殊樣式：</p>
</body>
注意： 下面的屬性可應(yīng)用于 "first-letter" 偽元素：
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
