<h3>1.常见选择器：</h3>
<style type="text/css">
/*标签选择器*/
span{
color:#00F;p
font-size:24px;
}
/*类选择择器(巧记:类的对象一般是.语法调用的)*/
.classStyle{
color:#FFF;
background-color:#3FF;
font-size:18px;
}
/*id选择器*/
#idStyle{
color:#CC6;
font-size:24px;
}
/*交集选择器(也叫父子选择器,只有在使用父选择器的基础上子选择器才会起作用)*/
#idStyle span{
color:#F00;
}
/*并集选择器(当发现两个选择器的属性一样时,可以使用,目的只是减少代码量)*/
.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{ /*移动鼠标经过*/
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 href="http://www.baidu.com" target="_blank">百度链接</a>
</body>
cssTest.gif
一般常用的选择器是id选择器和类选择器,那么这两个都在什么场景下使用呢?
一个id选择器一般在一份html中只会被一个标签使用,而一个类(class)选择器则可以被无数标签使用; 所以id选择器的定义是很有针对性的,针对某一个层次的标签等;
一个class选择器就很大众,通用;
<h3>2.选择器的优先级：</h3>
优先级：
在同时使用多个选择器且选择器有相同属性的情况下,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/类/标签 选择器优先级测试</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
