捕鱼机怎么调频

書名： HTML 5與CSS 3權威指南（第4版·下冊）
作者名：陸凌牛
本章字數： 1715字
更新時間： 2019-03-04 18:29:50

16.2　屬性選擇器

16.2.1　屬性選擇器概述

在HTML中，通過各種各樣的屬性，我們可以給元素增加很多附加信息。例如，通過width屬性，我們可以指定div元素的寬度；通過id屬性，我們可以將不同的div元素進行區分，并且通過JavaScript來控制這個div元素的內容和狀態。

接下來，我們在代碼清單16-1中看一個HTML頁面，該頁面中包含一些div，每個div之間用id屬性進行區分。

代碼清單16-1　一個具有很多div元素的頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
</head>
<div id="section1">示例文本1</div>
<div id="subsection1-1">示例文本1-1</div>
<div id="subsection1-2">示例文本1-2</div>
<div id="section2">示例文本2</div>
<div id="subsection2-1">示例文本2-1</div>
<div id="subsection2-2">示例文本2-2</div>

接下來，我們回顧一下CSS 2中對div元素使用樣式的方法，如果要將id為“section1”的div元素的背景色設定為黃色，我們首先追加樣式，如下所示。

<style type="text/css">
.divYellow{background:yellow}
</style>

然后指定id為“section1”的這個div元素的class屬性，如下所示。

<div id="section1" class="divYellow">示例文本1</div>

接下來，我們看一下CSS2中如何使用屬性選擇器來實現同樣的處理。

使用屬性選擇器時，需要聲明屬性與屬性值，聲明方法如下所示。

[att=val]

其中att代表屬性，val代表屬性值。例如，要將id為“section1”的div元素的背景色設定為黃色，我們只要在代碼清單16-1中加入如下所示的樣式代碼即可。

<style type="text/css">
[id=section1]{
    background-color: yellow;
}
</style>

最后，我們在代碼清單16-2中完整地看一下使用CSS 2的屬性選擇器的示例代碼，在本節中接下來的部分都只會針對這個示例中的樣式代碼進行修改，其他部分不做修改。

代碼清單16-2　使用CSS 2的屬性選擇器的示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
[id=section1]{
    background-color: yellow;
}
</style>
</head>
<div id="section1" class="divYellow">示例文本1</div>
<div id="subsection1-1">示例文本1-1</div>
<div id="subsection1-2">示例文本1-2</div>
<div id="section2">示例文本2</div>
<div id="subsection2-1">示例文本2-1</div>
<div id="subsection2-2">示例文本2-2</div>

追加了這個屬性選擇器后的運行結果如圖16-1所示。

16.2.2　CSS 3中的屬性選擇器

在CSS3中，追加了三個屬性選擇器分別為：[att*=val]、[att^=val]和[att$=val]，使得屬性選擇器有了通配符的概念。

1.[att*=val]屬性選擇器

[att*=val]屬性選擇器的含義是：如果元素用att表示的屬性的屬性值中包含用val指定的字符，則該元素使用這個樣式。針對上面所述“[id=section1]”屬性選擇器可以修改成“[id*=section1]”，其中“id”相當于[att*=val]屬性選擇器中的“att”，“section1”相當于[att*=val]屬性選擇器中的“val”。

在代碼清單16-1所述示例的樣式代碼中，如果使用如下代碼中所示的[att*=val]屬性選擇器，則頁面中id為“section1”“subsection1-1”“subsection1-2”的div元素的背景色都變為黃色，因為這些元素的id屬性中都包含“section1”字符。

[id*=section1]{
    background-color: yellow;
}

代碼清單16-1所述示例的樣式代碼中使用[att*=val]屬性選擇器后的運行結果如圖16-2所示。

圖16-1　使用CSS 2的屬性選擇器的示例

圖16-2　使用[att*=val]屬性選擇器的示例

2.[att^=val]屬性選擇器

[att^=val]屬性選擇器的含義是：如果元素用att表示的屬性的屬性值的開頭字符為用val指定的字符話，則該元素使用這個樣式。針對上面所述“[id=section1]”屬性選擇器可以修改成“[id^=section1]”。

在代碼清單16-1所述示例的樣式代碼中，如果將使用的[att=val]屬性選擇器改為使用如下所示的[att^=val]屬性選擇器，并且將val指定為“section”，則頁面中id為“section1”“section2”的div元素的背景色都變為黃色，因為這些元素的id屬性的開頭字符都為“section”字符。

[id^=section]{
    background-color: yellow;
}

代碼清單16-1所述示例的樣式代碼中使用[att^=val]屬性選擇器后的運行結果如圖16-3所示。

3.[att$=val]屬性選擇器

[att$=val]屬性選擇器的含義是：如果元素用att表示的屬性的屬性值的結尾字符為用val指定的字符，則該元素使用這個樣式。針對上面所述“[id=section1]”屬性選擇器可以修改成“[id$=section1]”。

在代碼清單16-1所述示例的樣式代碼中，如果采用如下所示的[att$=val]屬性選擇器，并且將val指定為“-1”，則頁面中id為“subsection1-1”“subsection2-1”的div元素的背景色都變為黃色，因為這些元素的id屬性的結尾字符都為“-1”字符。另外請注意該屬性選擇器中在指定匹配字符前必須加上“\”這個escape字符。

[id$=\-1]{
    background-color: yellow;
}

代碼清單16-1所述示例的樣式代碼中使用[att$=val]屬性選擇器后的運行結果如圖16-4所示。

圖16-3　使用[att^=val]屬性選擇器的示例

圖16-4　使用[att$=val]屬性選擇器的示例

16.2.3　靈活運用屬性選擇器

如果能夠靈活運用屬性選擇器，目前為止需要依靠id或class名才能實現的樣式完全可以使用屬性選擇器來實現。

例如，利用[att$=val]屬性選擇器，可以根據超鏈接中不同的文件擴展符使用不同的樣式。在代碼清單16-3所示示例中，在超鏈接地址的末尾為“／”“htm”“html”時顯示“Web網頁”文字，在超鏈接地址的末尾為“jpg”“jpeg”時顯示“JPEG圖像文件”文字。

代碼清單16-3　靈活運用屬性選擇器示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
a[href$=\/]:after, a[href$=htm]:after, a[href$=html]:after{
    content:"Web網頁";
    color: red;
}
a[href$=jpg]:after{
    content:"JPEG圖像文件";
    color: green;
}
</style>
</head>
<ul>
<li><a href="http://Lulingniu/">HTML5+CSS3權威指南</a></li>
<li><a href="http://Lulingniu/CSS3.htm">CSS3的新特性</a></li>
<li><a href="photo.jpg">圖像素材</a></li>
</ul>

這段代碼的運行結果如圖16-5所示。

圖16-5　靈活運用屬性選擇器示例

另外，如果使用IE瀏覽器來運行本示例，因為在IE 8之前尚未支持after偽元素選擇器，所以該示例只能在IE 8之后的瀏覽器中正確顯示，在接下來的“偽元素選擇器概述”一節中將針對after偽元素選擇器做詳細說明。

官术网_书友最值得收藏!

HTML 5與CSS 3權威指南（第4版·下冊）

16.2 屬性選擇器

16.2.1 屬性選擇器概述

16.2.2 CSS 3中的屬性選擇器