CSS-基本選擇器
阿新 • • 發佈:2018-12-26
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*
* CSS的選擇器
* 告訴CSS的程式碼作用在哪個標籤上。
* 基本選擇器
* 標籤名選擇器 div{} span{}
* 類選擇器:在HTML的標籤上,提供了屬性 class,定位到div的標籤(美工經常使用的方式)
* 寫法: .class的名稱 (.hehe{CSS的程式碼})
* 設定不同的標籤,具有相同的樣式
* ID選擇器
* 在HTML的標籤上,提供的屬性 設定樣式
* 寫法: #id的名稱 (#haha{CSS的程式碼})
* 一般情況下:設定不同的ID
* 一般情況下給js語言來使用。
* 優先順序:(特殊情況下)
* 標籤名選擇器 < 類選擇器 < ID選擇器 < style屬性
* 擴充套件選擇器
*
div{
color: red;
}
.hehe{
font-size: 25px;
color: fuchsia;
}
*/
#haha{
color: blue;
}
div{
color: red;
}
</style>
</head>
<body>
<div>這是div的區域1</div>
<div id="haha">這是div的區域2</div>
<span class="hehe">這是span的區域1</span>
<span id="haha2" >這是span的區域2</span>
<p class="hehe">這是p的區域1</p>
<p>這是p的區域2</p>
</body>
</html>