1.css中的選擇器：
1.類選擇器，又叫class選擇器
2.id選擇器
3.html元素選擇器(又叫標簽選擇器)
4.通配符選擇器
5.偽類選擇器
6.組合選擇器(多元素選擇器,子元素選擇器,后代選擇器)
簡單來說，選擇器就是在css中創建，而在網頁頁面(html,jsp,php,asp.net)中使用
選擇器的名稱命名規范:
一般使用中划線形式:xxx-yyy,一般是小寫字母
2.類選擇器
基本語法:
.類選擇器名稱{
CSS屬性:屬性值;
CSS屬性:屬性值;
}
一般來說,類選擇器是提供給多個html元素來使用的.
實例代碼:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span-news{
font-weight:bold;
background-color:pink;
color:black;
}
</style>
</head>
<body>
<span class="span-news">新聞一</span>
<span class="span-news">新聞二</span>
<span class="span-news">新聞三</span>
<span class="span-news">新聞四</span>
<span class="span-news">新聞五</span>
</body>
</html>
刷新瀏覽器后顯示效果如下:
3.id選擇器
基本語法:
#id選擇器名稱{
CSS屬性:屬性值;
CSS屬性:屬性值;
}
在類選擇器代碼的基礎上增加一行字體,並設置其自己的樣式.
實例代碼如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span-news{
font-weight:bold;
background-color:pink;
color:black;
}
#span-news-tb{
font-weight:bold;
font-size:25px;
background-color:silver;
}
</style>
</head>
<body>
<span class="span-news">新聞一</span>
<span class="span-news">新聞二</span>
<span class="span-news">新聞三</span>
<span class="span-news">新聞四</span>
<span class="span-news">新聞五</span>
<hr>
<span id="span-news-tb">這是一個比較重要的新聞</span>
</body>
</html>
刷新瀏覽器后顯示的效果:
關於id選擇器的一些說明 :
1.一般來說,id選擇器是提供給某一個html元素來使用
2.當不確定時,有多個html元素來使用該樣式時,請使用類選擇器.