前端基礎學習之CSS選擇器
CSS基礎之選擇器
派生選擇器
通過元素在其位置的上下文關係來定義樣式，使標記更加簡潔
派生選擇器允許你根據文件的上下文關係來定義某個標籤的樣式，通過合理的使用派生選擇器，可以是Html程式碼更加的簡潔
程式碼示例：
li strong {
font-style: italic;
font-weight: normal;
}
在上面例子中，只有li元素中的strong元素樣式為斜體字，無需為strong樣式的元素定義特別的class或id，是程式碼更加的簡潔
ID選擇器
ID選擇器可以為標有特定ID的HTML元素指定特定的樣式，ID選擇器以#來定義
下面兩個ID選擇器分別定義了一個紅色元素個一個綠色元素
#red {color:red;}
#green {color:green;}
下面的HTML程式碼中，分別定義了id為red的元素為紅色，id為 green的元素為綠色
<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>
在現代的佈局中，id選擇器常常用來建立派生選擇器，雖然id選擇器在頁面中只能出現一次，但是作為id選擇器的派生選擇器也可以被使用很多次
程式碼示例：
#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } #sidebar h2 { font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5; text-align: right; }
在上面的程式碼中，頁面中的p元素與在sidebar中的p元素是明顯不同的，sidebar內的p元素得到的特殊處理，同時，h2 元素也是同樣的道理，在sidebar中的元素h2是特殊處理的，與介面的其他h2元素是不同的
類選擇器
在css中，類選擇器以.號顯示，引用時，在元素後面加上class=類名表示
.center {text-align: center}
在上面的例子中，所有擁有center類的Html元素文字均居中顯示
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
在程式碼中，元素h1和元素p都擁有center類，那就意味著兩者都要遵守center類中的約束條件
同id選擇器一樣，類選擇器也可用於派生選擇器，用法與id選擇器類似，不做過多的闡釋，下面為程式碼示例：
td.fancy {
color: #f60;
background: #666;
}
在上面的程式碼中，類名為fancy的是橙色且背景為灰色的表格
<td class="fancy">
你可以將類fancy分配給任何一個表格元素多次，那些有fancy標註的表格元素都遵守fancy類的約束，而其他的則不受影響
屬性選擇器
對帶有指定屬性的html元素設定樣式 ，而不僅限於class和id屬性，
註釋：只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支援屬性選擇器。在 IE6 及更低的版本中，不支援屬性選擇。
[title]
{
color:red;
}
上面的例子為帶有所有title屬性的元素設定樣式
程式碼示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以應用樣式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<hr />
<h1>無法應用樣式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>