<h3>1.常見選擇器：</h3>
<style type="text/css">
/*標簽選擇器*/
span{
color:#00F;p
font-size:24px;
}
/*類選擇擇器(巧記:類的對象一般是.語法調(diào)用的)*/
.classStyle{
color:#FFF;
background-color:#3FF;
font-size:18px;
}
/*id選擇器*/
#idStyle{
color:#CC6;
font-size:24px;
}
/*交集選擇器(也叫父子選擇器,只有在使用父選擇器的基礎(chǔ)上子選擇器才會起作用)*/
#idStyle span{
color:#F00;
}
/*并集選擇器(當發(fā)現(xiàn)兩個選擇器的屬性一樣時,可以使用,目的只是減少代碼量)*/
.style1,.style2{
color:#F0F;
font-family:Tahoma, Geneva, sans-serif;
}
</style>
<style type="text/css">
/*偽類選擇器(注意順序問題,應該是如下順序)*/
a:link{ /*正常情況下*/
color:black;
text-decoration: none;
}
a:visited{ /*訪問過后*/
color:#00F;
}
a:hover{ /*移動鼠標經(jīng)過*/
color:#F00;
text-decoration: underline;/*加下劃線*/
}
a:active{ /*按下不抬手*/
color:#0FF;
text-decoration:none;/*去掉下劃線*/
}
</style>
</head>
<body>
<span>測試標簽選擇器</span>
<p class="classStyle">測試類選擇器</p>
<p id="idStyle">測試id選擇器</p>
<p id="idStyle">測試<span>父子</span>選擇器</p>
<!--只有在使用了父選擇器的標簽中再使用子選擇器,該父子選擇器才會起作用-->
<p class="style1">測試并集選擇器1</p>
<p class="style2">測試并集選擇器2</p>
<a target="_blank">百度鏈接</a>
</body>
cssTest.gif
一般常用的選擇器是id選擇器和類選擇器,那么這兩個都在什么場景下使用呢?
一個id選擇器一般在一份html中只會被一個標簽使用,而一個類(class)選擇器則可以被無數(shù)標簽使用; 所以id選擇器的定義是很有針對性的,針對某一個層次的標簽等;
一個class選擇器就很大眾,通用;
<h3>2.選擇器的優(yōu)先級：</h3>
優(yōu)先級：
在同時使用多個選擇器且選擇器有相同屬性的情況下,id選擇器>類選擇器>標簽選擇器
如都有color:屬性;那么會按照上面的順序來;
<style type="text/css">
#id{
color:#F00; /*紅*/
font-size:20px;
}
p{
color:#0F0; /*綠*/
font-size:36px;
}
.class{
color:#00F; /*藍*/
}
</style>
</head>
<body>
<p class="class" id="id">id/類/標簽 選擇器優(yōu)先級測試</p>
<span class="class" id="id">id/類選擇器測試</span>
<p class="class">類/標簽選擇器測試</p>
</body>
Paste_Image.png
<h3>3.練習：</h3>
需求:在鼠標移動到的某行(不包括標題)上時顯示紅色
<style type="text/css">
tbody tr:hover{
background-color:#F00;
}
</style>
</head>
<body>
<table border="1px" width="200px" height="100px">
<tr>
<th>姓名</th>
<th>班級</th>
<th>成績</th>
</tr>
<tbody>
<tr>
<td rowspan="2">丁昌江</td>
<td>java班</td>
<td>83</td>
</tr>
<tr>
<td>ios班</td>
<td>99</td>
</tr>
<tr>
<td>吳云飛</td>
<td>java班</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
cssTest.gif
