web前端基礎：CSS選擇器

• 標籤選擇器
• 類選擇器
• ID選擇器
• 全局選擇器
• 羣組選擇器
• 後代選擇器

類選擇器

爲HTML標籤添加class屬性：

<h1 class="red">內容1</h1>
<p>內容2</p>
<p class="red">內容3</p>

通過類選擇器來爲具有此class屬性的元素設置CSS樣式：

.red{color:red;}

可對不同類型元素的同一個名稱的類選擇器設置不同的
樣式規則：

p.red{font-size:50px;}
h1.red{font-size:30px;}

同一個元素可以設置多個類，之間有空格隔開：

<h1 class="red">內容1</h1>
<p class="red  blue">內容2</p>
<p class="red">內容3</p>

標籤選擇器

以HTML標籤作爲選擇器：

h1{color:red:}
p{color:blue;}

ID選擇器

爲HTML標籤添加ID屬性：

<h1 >內容1</h1>
<p id="p1">內容2</p>
<p id="p2">內容3</p>

通過ID選擇器來爲具有此ID的元素設置CSS規則：

#p1{color:red:}
#p2{color:blue;}

羣組選擇器

集體統一設置樣式：

h1,h2,p{font-size:30px;}

全局選擇器

所有標籤設置樣式：

*{color:red;
font-size:10px;
......
}

後代選擇器

<em>css層疊樣式</em>
<p><em>css</em>層疊樣式</p>
<p><em>css</em>層疊樣式</p>

使用後代選擇器設置，之間用空格隔開：

p em{font-size:50px;}

後代選擇器可以多層:

h1 p em{font-size:50px;}