CSS樣式及相關的選擇器的介紹和區別

時間 2019-11-17

標籤 css 樣式相關選擇器介紹區別欄目 CSS 简体版

原文原文鏈接

1.CSS樣式做用：用於控制頁面顯示的方式和佈局（定義html元素展現的方式），美化界面，將內容與表現分離，便於維護和擴展；css

2.CSS樣式的相關的選擇器包括：html

A. html選擇器：如：p{color:red;}瀏覽器

B. ID選擇器：如：#div1{font-size:14px; text-align:left;}佈局

C. 類選擇器：如： .tr{width:15%; font-weight:bold;}spa

D. 屬性選擇器：屬性選擇器是對指定屬性的html元素設置相關的樣式；（該選擇僅適用於IE瀏覽器版本高於IE7及以上，且在規定!DOCTYPE的狀況下；htm

屬性選擇器的使用方法是：首先須要在頁面的開頭添加一個：<! DocType>的標記，而後在<style type="text/css">中使用如：it

[text-align=center] {color:red} 該條樣式設置的含義是：全部具備text-align="center"的樣式屬性的html元素的顏色爲紅色；擴展

[name ~="t1"] {color:blud} 該條樣式設置的含義是：包含name屬性爲t1的，由空格分隔的的html元素的顏色爲藍色；方法

[name |="t2"] {color:green} 該條樣式設置的含義是：採用-鏈接的name屬性爲-t2的html元素的顏色爲綠色；

</style>

示例如：

<!DOCTYPE html>
<html>
<head>
<title>html的屬性選擇器</title>
<style type="text/css">
[align=center]{color:Red;}
[class ~="t"]{color:Gray;}
[name |="t"] {color:Blue;}
</style>
</head>
<body>
<p align="center">Hello!</p>
<p class="t c">
你們好！</p>
<span name="s-t">Well</span>
</body>
</html>

3.ID選擇器與類選擇器的共同點及區別：

ID選擇器和類選擇器的相同點：選擇器的名稱均可以自定義，區分大小寫，建議使用小寫字母，不能以數字開頭；

區別：ID選擇器以#開頭，具備惟一性，在同一個頁面只能使用一次，類選擇器以.開頭，在同一個界面能夠屢次使用同一個類樣式；