基礎部分 CSS

通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。

在 css1 中，通過這種方式來應用規則的選擇器被稱為上下文選擇器 (contextual selectors)，這是由於它們依賴於上下文關係來應用或者避免某項規則。在 css2 中，它們稱為派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。

派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器，我們可以使 html **變得更加整潔。

比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義乙個派生選擇器：

li strong

請注意標記為的藍色**的上下文關係：

我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用我是斜體字。這是因為 strong 元素位於 li 元素內。我是正常的字型。

在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特別的 class 或 id，**更加簡潔。

id 選擇器可以為標有特定 id 的 html 元素指定特定的樣式。

id 選擇器以「#」來定義。

下面的兩個 id 選擇器，第乙個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：

#red #green

下面的 html **中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

這個段落是紅色。這個段落是綠色。

**注意：**id 屬性只能在每個 html 文件**現一次。

id 選擇器和派生選擇器

在現代布局中，id 選擇器常常用於建立派生選擇器。

#sidebar p

上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是**單元，儘管它也可能是乙個**或者其他塊級元素。它甚至可以是乙個內聯元素，比如或者，不過這樣的用法是非法的，因為不可以在內聯元素中嵌入

#sidebar p

不知道大家是不是和我一樣在w3school學習css的時候遇到了關於id選擇器和派生選擇器的問題。

我當時對這乙個派生選擇器的用法的理解是：

小朋友你是否有許多問號？

但是我們執行之後就會發現css根本沒有起作用。

後來經過一些查詢發現其實真實用法是：

小朋友你是否有許多問號？

我們再執行一下，會發現：

這次就成功了。其實意思就是什麼呢，這個id選擇器不是給被定義的標籤使用的，而是把它包含在內的標籤。算是給大家排個雷吧。

在 css 中，類選擇器以乙個點號顯示：

.center

在上面的例子中，所有擁有 center 類的 html 元素均為居中。

在下面的 html **中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守「.center」選擇器中的規則。

this paragraph will also be center-aligned.

**注意：**類名的第乙個字元不能使用數字！它無法在 mozilla 或 firefox 中起作用。

和 id 一樣，class 也可被用作派生選擇器：

.fancy td

在上面這個例子中，類名為 fancy 的更大的元素內部的**單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是乙個**或者乙個 div）

元素也可以基於它們的類而被選擇：

td.fancy

在上面的例子中，類名為 fancy 的**單元將是帶有灰色背景的橙色。

class
="fancy"
>
你可以將類 fancy 分配給任何乙個**元素任意多的次數。那些以 fancy 標註的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為 fancy 的類的單元格不會受這條規則的影響。還有一點值得注意，class 為 fancy 的段落也不會是帶有灰色背景的橙色，當然，任何其他被標註為 fancy 的元素也不會受這條規則的影響。這都是由於我們書寫這條規則的方式，這個效果被限制於被標註為 fancy 的**單元（即使用 td 元素來選擇 fancy 類）。
對帶有指定屬性的 html 元素設定樣式(意思即為呼叫該屬性方法的標籤擁有這個樣式)。
可以為擁有指定屬性的 html 元素設定樣式，而不僅限於 class 和 id 屬性。
**注釋：**只有在規定了 !doctype 時，ie7 和 ie8 才支援屬性選擇器。在 ie6 及更低的版本中，不支援屬性選擇。
w3school
w3school

下面這個例子演示了定義屬性具體值才可以呼叫。

w3school hi!w3school

下面示例為模糊屬性具體值也可呼叫（[title~=hello]意為hello與「空格」的連線可用）。

hello w3school students! hello w3school students!

下面示例為模糊屬性具體值也可呼叫（[lang|=en]意為en與「-」的連線可用）

hello! hi!hi! hao!

歸納一下：

選擇器描述

[attribute=value]

用於選取帶有指定屬性的元素。

[attribute~=value]

用於選取帶有指定屬性和值的元素。

[attribute|value]

用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。

[attribute^=value]

匹配屬性值以指定值開頭的每個元素。

[attribute$=value]

匹配屬性值以指定值結尾的每個元素。

[attribute*=value]

匹配屬性值中包含指定值的每個元素。

*和~的區別有點不理解啊，感覺沒啥區別····

當讀到乙個樣式表時，瀏覽器會根據它來格式化 html 文件。插入樣式表的方法有三種：

瀏覽器會從檔案 mystyle.css 中讀到樣式宣告，並根據它來格式文件。

hr p body

不要在屬性值與單位之間留有空格。假如你使用「margin-left: 20 px」而不是「margin-left: 20px」，它僅在 ie 6 中有效，但是在 mozilla/firefox 或 netscape 中卻無法正常工作。

當單個文件需要特殊的樣式時，就應該使用內部樣式表。你可以使用

由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在乙個元素上應用一次時。

this is a paragraph

如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。

例如，外部樣式表擁有針對 h3 選擇器的三個屬性：

h3

而內部樣式表擁有針對 h3 選擇器的兩個屬性：

h3

color: red; 
text-align: right; 
font-size: 20pt;

即顏色屬性將被繼承於外部樣式表，而文字排列（text-alignment）和字型尺寸（font-size）會被內部樣式表中的規則取代。

優先順序：

內聯樣式》內部樣式表》外部樣式表

暫時css也就學這麼多了，如後續仍需學習，鏈結。

基礎部分 CSS

CSS部分基礎語法

前端部分 CSS基礎介紹

CSS的使用（基礎部分）

基礎部分 CSS

CSS部分基礎語法

前端部分 CSS基礎介紹

CSS的使用（基礎部分）

相關推薦