CSS速成教程——2

標籤：基礎   hello   選取器   作用   bsp   標記   方式   nbsp   style   

CSS 基礎選取器一、派生選取器

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

派生選取器允許你根據文檔的上下文關係來確定某個標籤的樣式。通過合理地使用派生選取器，我們可以使 HTML 程式碼變得更加整潔。 比方說，你希望列表中的 strong 元素變為紅色，而不是通常的黑色，可以這樣定義一個派生選取器：

li strong{    color: red;}

請注意在 HTML 中標記為

• 的代碼的上下文關係

<p><strong>我是黑色，因為我不在列表當中，所以這個規則對我不起作用</strong></p>        <u1>            <li><strong>我是紅色。這是因為 strong 元素位於 li 元素內。</li>        </u1>

在 css 中定義的 li strong 的樣式，只會影響上面 html 檔案中的<li><strong>,而不會影響<p><strong>中的內容

二、id 選取器

1.id 選取器： id 選取器可以為標有 id 的 HTML 元素指定特定的樣式 id 選取器以“#”來定義

2.id 選取器和派生選取器： 目前比較常用的方式是 id 選取器常常用於建立派生選取器

三、類別選取器(1)在 CSS 中，類別選取器以一個點號顯示：

.divclass {    color: red;}

 

在下面的 html 代碼中，div 元素含有 divclass 類，意味著它要遵守.divclass的規則。

<div class="divclass">hello div</div>

注意：類名的第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。

(2)和 id 一樣，class 也可被用作派生選取器：

.pclass a{    color: green;}

四、屬性選取器

對帶有指定屬性的 HTML 元素設定樣式。

(1)下面的例子為帶有 title 屬性的所有元素設定樣式：

<style>[title] {color:red;}</style>

(2)屬性和值選取器

下面的例子為 title="te" 的所有元素設定樣式：

<style>[title=te]{                color: red;            }</style>

 

CSS速成教程——2