CSS入門系列：第三部分 進階CSS和可選擇的媒體

——摘自《CSS入門經典（第3版）》 Lan Pouncey、Richard York著

【進階選取器】·直接子選取器

body>.intro {font-weight:bold;}//直接子選取器只應用於元素的直接子項目。直接子選取器也可以串聯起來，分隔字元號是大於符號（>）。

註：除了IE6以外，所有主流瀏覽器都支援直接子選取器。

·相鄰選取器

h1+.intro {font-weight:bold;}//這將選擇緊跟在h1元素後且類名為intro的元素變為粗體。

相鄰選取器應用於元素的下一個兄弟元素。通過+ 符號串聯。

註：除了IE6以外，所有主流瀏覽器都支援相鄰選取器。

·屬性選取器

屬性選取器基於HTML元素中存在的屬性或屬性值應用樣式表聲明。

有幾種不同的屬性選取器，在CSS中可以根據以下幾條標準檢查元素屬性。

• 屬性的存在與否
• 屬性值
• 屬性值是否以特定字元開始
• 屬性值是否以特定字元結束
• 在屬性值的任意部分（前端、末端或中間）是否包含特定字串

註：除了IE6，所有主流瀏覽器都支援屬性選取器。

·基於屬性是否存在進行選擇

input[name]{border:2px dashed #000;}//只為具有name屬性的input元素設定。

·基於屬性值進行選擇

input[name=”email”] {border:2px dashed #000;}//只有name屬性值為email的input元素才會匹配這個選取器。

·屬性子字串選取器

a[href^=”mailto:”] {padding-left:23px;background:transparent url(icon-email.png) no-repeat center left;}//href屬性後面的^字元用於選擇其前面的屬性以其後面的值開頭的元素。input [id$=”name”] {border:2px dashed #000;}//使用貨幣符號來表示該選取器匹配屬性值的末端。[name*=”recipe”] {border:20x dashed #000;}//使用* 號來表示該選取器將在屬性值的任意位置搜尋。

·虛擬元素：first-letter和:frist-line

虛擬元素用來表示使用撲通標記無法輕易修改的文檔的特定部分。例如，虛擬元素可以用來修改某個段落首字母或者首行的格式。

虛擬元素:first-letter和:first-line表示一個包含文本的元素的首字母和首行。

說明：CSS3修改了虛擬元素的文法，即在每個虛擬元素前使用雙冒號（::），例如,p::first-letter表示段落的首字母，而不是p:first-letter。這種文法將虛擬元素於偽類區別開來，偽類使用單冒號文法，例如a:hover是一個偽類的引用。

然而，任何版本的IE都不支援這種形式，而是支援單冒號形式，而且主流瀏覽器也仍然支援單冒號形式，所以建議使用:first-letter和:first-line。

·結構化偽類:first-child結構化偽類只用於當一個元素是另一個元素的第1個子項目時。

註：除了IE6，所有主流瀏覽器都支援:first-child機構化偽類。

:lat-child結構化偽類只用於當一個元素是另一個元素的最後一個子項目時。

註：IE6、IE7和IE8不支援:last-child結構化偽類，其他所有主流瀏覽器（包括IE9）都支援該偽類。

:nth-child(n)結構化偽類只用於當一個元素是另一個元素的第N個子項目時，如果括弧中的值是3，那麼將選擇第三個子項目。

註：IE6、IE7和IE8不支援:nth-child(n)結構化偽類，其他所有主流瀏覽器（包括IE9）都支援該偽類。

【自訂滑鼠指標】·cursor屬性控製為特定元素顯示的指標類型。

屬性	值
cursor	[<url>.]*[auto|croschair|default|pointer|move|e=resire|ne-resize|nw-resize|n-resize|ne-resize|sw-resize|s-resize|w-resize|text|wait|help|progress]
初始值:auto
cursor的非標準擴充	hand|all-scroll|col-resize||row-resize|no-drop|not-allowed|veertical=text

註：Safari和Chrome瀏覽器不支援非標準的cursor關鍵字

·指標相容性

目前最常用的指標是pointer，當使用JavaScript添加某種功能時，可以使用這種指標提示元素可以互動。

【控制透明度和可見度】·opacity屬性

屬性	值
opacity	<number> 初始值：1

opacity的值取值範圍為0-1，為1表示元素完全不透明，值為0則表示元素完全不可見。

註：除了IE6、7、8，所有主流瀏覽器都支援opacity屬性。

·visibility屬性控制元素的可見度，不可見的元素仍會佔據頁面空間

屬性	值
visibility	visible|hidden 初始值：visible

【為行動裝置樣式化內容】

行動裝置上網站的設計和布局注意點：

•  不要為網站設定絕對寬度
•  在一列中顯示主要內容
•  明確地指示連結、按鈕和其他互動式控制項
•  不要假定有懸停狀態

·行動瀏覽器渲染引擎

Webkit和Presto在行動瀏覽器中使用最為廣泛，Apple公司的移動版Safari和Google公司的Android瀏覽器使用Webkit渲染引擎，Opera Mobile和Opera使用Presto渲染引擎，Windows Phone7的Mobile IE 7瀏覽器使用Trident渲染引擎，Firefox行動瀏覽器使用Gecko渲染引擎。

·媒體查詢

理論上可以使用media屬性或者@media規則針對不同的媒體應用樣式。media屬性應用於link或style元素，而@media規則在樣式表內使用。

不同的媒體類型：

媒體	目的
all	適用於所有裝置
handbeld	針對手持功能
print	針對印表機
projection	針對投影影像
screen	針對彩色顯示器
speech|aural	針對語音合成器
......