CSS基礎(chǔ)教程之基本選擇器
CSS選擇器
1、基本選擇器
（1）“*”選擇器：通配符
描述：將匹配所有的HTML標(biāo)簽，所有的標(biāo)簽都會(huì)改變的。
語(yǔ)法：*{ color:red; }
?注：“*”盡量少用，因?yàn)镮E6不支持。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
*{
color:red;
}
</style>
</head>
<body>
<h1>習(xí)近平心中的互聯(lián)網(wǎng)</h1>
<p>互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類(lèi)“一網(wǎng)打盡”，人們?cè)诓恢挥X(jué)中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html>（2）標(biāo)簽選擇器
描述：將匹配指定的HTML標(biāo)簽。
語(yǔ)法：h1{ color:red; }
注：CSS標(biāo)簽選擇器，與HTML標(biāo)簽的名稱(chēng)一樣，但不能加尖括號(hào)。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
h1{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>習(xí)近平心中的互聯(lián)網(wǎng)</h1>
<p>互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類(lèi)“一網(wǎng)打盡”，人們?cè)诓恢挥X(jué)中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html>（3）class選擇器(類(lèi)選擇器)——類(lèi)選擇器是使用頻率最高的
描述：給一類(lèi)HTML標(biāo)簽加樣式。這里所指的“一類(lèi)”是：每個(gè)HTML標(biāo)簽都有一個(gè)class屬性，且class的值一樣。class屬性是公共屬性，每個(gè)HTML標(biāo)簽都有。
類(lèi)選擇器的名稱(chēng)，必須以“.”開(kāi)頭，后限HTML標(biāo)簽的class屬性的值。如：.box{ color:red; }
注：?HTML標(biāo)簽的class屬性的值，不能以數(shù)字開(kāi)頭。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.NO1{
color:red;
background-color:#88ff66;
}
</style>
</head>
<body>
<h1 class="NO1">習(xí)近平心中的互聯(lián)網(wǎng)</h1>
<p class="NO1">互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類(lèi)“一網(wǎng)打盡”，人們?cè)诓恢挥X(jué)中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html>（4）id選擇器
描述：給指定id的元素添加樣式。
注：
網(wǎng)頁(yè)中HTML標(biāo)簽的id屬性的值，必須是唯一的。
每一個(gè)HTML標(biāo)簽都有一個(gè)id的公共屬性。
id屬性一般是給JS使用的，不是讓你來(lái)加樣式的。class屬性只能給CSS用，不能給JS用的。
id選擇器的名稱(chēng)，必須以“#”開(kāi)頭，后跟HTML標(biāo)記的id屬性的值。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
#NO1{
color:blue;
background-color:#88ff99;
}
.NO1{
color:red;
background-color:#88ff66;
}
</style>
</head>
<body>
<h1 id="NO1">習(xí)近平心中的互聯(lián)網(wǎng)</h1>
<p class="NO1">互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類(lèi)“一網(wǎng)打盡”，人們?cè)诓恢挥X(jué)中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html>
