CSS（02）CSS選擇器

阿新 • • 發佈：2022-05-13

一、元素（型別）選擇器

最常見的 CSS 選擇器是元素選擇器。換句話說，文件的元素就是最基本的選擇器。

如果設定 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

親自試一試

在 W3C 標準中，元素選擇器又稱為型別選擇器（type selector）。

“型別選擇器匹配文件語言元素型別的名稱。型別選擇器匹配文件樹中該元素型別的每一個例項。”

因此，我們也可以為 XML 文件中的元素設定樣式：

XML 文件：

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
 <to>George</to>
 <from>John</from>
 <heading>Reminder</heading>
 <body>Don't forget the meeting!</body>
</note>

CSS 文件：

note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }

to
  {
  font-size:28px;
  display: block;
  }

from
  {
  font-size:28px;
  display: block;
  }

heading
  {
  color: red;
  font-size:60px;
  display: block;
  }

body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

檢視效果

通過上面的例子，您可以看到，CSS 元素選擇器（型別選擇器）可以設定 XML 文件中元素的樣式。

二、id 選擇器

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

HTML元素以id屬性來設定id選擇器,CSS 中 id 選擇器以 "#" 來定義。

以下的樣式規則應用於元素屬性 id="para1":

#para1 { text-align:center; color:red; }

嘗試一下 »

ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

三、class 選擇器

class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用。

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：

在以下的例子中，所有擁有 center 類的 HTML 元素均為居中。

.center {text-align:center;}

嘗試一下 »

你也可以指定特定的HTML元素使用class。

在以下例項中, 所有的 p 元素使用 class="center" 讓該元素的文字居中:

p.center {text-align:center;}

嘗試一下 »

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

四、分組選擇器

在樣式表中有很多具有相同樣式的元素。

h1
{
    color:green;
}
h2
{
    color:green;
}
p
{
    color:green;
}

為了儘量減少程式碼，你可以使用分組選擇器。

每個選擇器用逗號分隔。

在下面的例子中，我們對以上程式碼使用分組選擇器：

h1,h2,p { color:green; }

嘗試一下 »

五、巢狀選擇器

它可能適用於選擇器內部的選擇器的樣式。

在下面的例子設定了三個樣式：

p{ }: 為所有 p 元素指定一個樣式。
.marked{ }: 為所有 class="marked" 的元素指定一個樣式。
.marked p{ }: 為所有 class="marked" 元素內的 p 元素指定一個樣式。
p.marked{ }: 為所有 class="marked" 的 p 元素指定一個樣式。

p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

嘗試一下 »

六、CSS 組合選擇符

1、後代選擇器(以空格分隔)

後代選擇器用於選取某元素的後代元素。

以下例項選取所有元素插入到元素中:

div p { background-color:yellow; }

嘗試一下 »

2、直接子元素選擇器(以>大於號分隔）

與後代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。

以下例項選擇了元素中所有直接子元素：

div>p { background-color:yellow; }

嘗試一下 »

3、相鄰兄弟選擇器（以+加號分隔）

相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素後的元素，且二者有相同父元素。

如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。

以下例項選取了所有位於元素後的第一個元素:

div+p { background-color:yellow; }

嘗試一下 »

4、後續兄弟選擇器（以~破折號分隔）

後續兄弟選擇器選取所有指定元素之後的相鄰兄弟元素。

以下例項選取了所有元素之後的所有相鄰兄弟元素 :

div~p { background-color:yellow; }

嘗試一下 »

七、屬性選擇器

注意：IE7和IE8需宣告!DOCTYPE才支援屬性選擇器！IE6和更低的版本不支援屬性選擇器。

"value 是完整單詞" 型別的比較符號: ~=, |=
"拼接字串" 型別的比較符號: *=, ^=, $=

下面的例子是把包含標題（title）的所有元素變為藍色：

[title]
{
    color:blue;
}

嘗試一下 »

1、屬性值等於value

下面的例項改變了標題title='runoob'元素的邊框樣式:

[title=runoob]
{
    border:5px solid green;
}

嘗試一下 »

2、屬性中包含 value:

1、[attribute~=value] 屬性中包含獨立的單詞為 value，例如：

[title~=flower]  -->

嘗試一下 »

2、[attribute|=value] 屬性中必須是完整且唯一的單詞，或者以 - 分隔開：

下面是包含指定值的lang屬性的元素樣式的例子，使用（|）分隔屬性和值:

[lang|=en] { color:blue; }

嘗試一下 »

3、[attribute*=value] 屬性中包含字串，作字串拆分只要能拆出來 value 這個詞就行，例如：

[title*=flower]   -->

3、屬性中以value首尾:

1、[attribute^=value] :attribute 屬性以 value 開頭

[lang^=en]    -->

2、[attribute$=value]:attribute 屬性以 value 結尾

a[src$=".pdf"]

屬性選擇器樣式無需使用class或id的形式:

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

嘗試一下 »