《css權威指南》學習筆記二

阿新 • • 發佈：2018-12-16

第二章選擇器

一、基本規則

1、規則結構

一個css樣式文件由若干個規則組成，下面是一條簡單的規則：

h1 {color: red; background: yellow;}

每個規則包括兩部分：選擇器和宣告塊。在示例中，h1就是選擇器，{color: red; background: yellow}部分則是宣告塊。宣告塊由一個或多個宣告組成。每個宣告是一個屬性-值對，示例中，color就是一個屬性，它的值是red。

2、元素選擇器

可以使用一個html元素作為選擇器：

p {
	color: red;
}

3、宣告的值

宣告的值要麼是一個關鍵字，要麼是該屬性可取的關鍵字的一個列表，關鍵字之間用空格分隔。

/* 設定p元素的邊框是細邊框，實線，紅色 */
p {border: thin solid red}

二、分組

1、選擇器分組

在規則的宣告部分可以使用一組選擇器，選擇器之間用英文逗號隔開，這些選擇器共用一個宣告塊。

h2, p {color: gray}

示例程式碼的作用是同時設定h2元素和p元素的顏色為灰色。

萬用字元選擇器

css中*稱為萬用字元選擇器，它可以匹配所有元素。

2、宣告分組

在一條規則中可以設定一組選擇器，當然也可以設定一組宣告，宣告之間使用;隔開。

三、類選擇器和ID選擇器

1、類選擇器

類選擇器通過html元素的class屬性來匹配元素：

<html>
< 
head>
<style>
/* 設定class為warning的元素字型為粗字型。 */
p.warning {
	font-weight: bold;
}
</style>
</head>
<body>
<p class="warning">This is a warning message!</p>
</body>
</html>

類名前加一個點號.，可以組成一個類選擇器，類選擇器可以單獨使用，也可以像示例程式碼中一樣，結合元素選擇器來使用。

2、多類選擇器

class屬性的值除了一個詞的情況外，還可能是一個詞列表

，各個詞之間用空格分隔。

<html>
<head>
<style>
/* 設定class值包含warning和danger的元素的字型為粗字型。 */
p.warning.danger {
	font-weight: bold;
}
</style>
</head>
<body>
<p class="warning danger">This is a warning danger message!</p>
<p class="danger">This is a danger message!</p>
</body>
</html>

多個類選擇器結合使用時，沒有先後順序。

3、ID選擇器。

ID選擇器通過html元素的id屬性匹配元素：

<html>
<head>
<style>
/* 設定id值user-id的元素為紅色。 */
#user-id {
	color: red;
}
</style>
</head>
<body>
<p id="user-id">Admin</p>
</body>
</html>

不同於class屬性，id屬性只能有一個詞，不能為列表的形式。且同一個html文件中id值應該是唯一的，只後相同的id會被忽略。

四、屬性選擇器

1、簡單屬性選擇

如果只是希望選擇有某個屬性的元素，而不論該屬性的值是什麼，可以使用簡單屬性選擇器。簡單屬性選擇器的形式為[屬性名]，示例如下：

/* 設定所有帶有class屬性的p元素的顏色為紅色 */
p[class] {color :red;}

2、根據具體屬性值選擇

還可以選擇特定屬性值的元素：

/* 設定所有href值為http://www.baidu.com的a元素為粗字型 */
a[href="http://www.baidu.com"] {font-weight: bold;}

3、根據部分屬性值選擇

如果屬性支援詞列表作為值，那麼可以根據部分屬性值來選擇。

/* 設定所有class屬性包括danger的p元素為紅色 */
p[class~="danger"] {color: red;}

除了~=之外，還有以下部分屬性選擇器： [foo^="bar"]，表示選擇foo屬性值以var開頭的元素。 [foo$="bar"]，表示選擇foo屬性值以bar結尾的元素。 [foo*="bar"]，表示選擇foo屬性值包括bar子串的元素。

4、特定屬性選擇器

例： [lang|="en"]，表示選則lang屬性以en或en-開頭的元素。

特定屬性選擇器和上一小節的部分屬性選擇器都不常用，但在特定的情況下確實很方便。