3.4css样式表之各选择器
描述:CSS常用的选择器
1.标签选择器
格式: 标签名称{css样式代码;}
例如:设置行高 tr{heigth:100px}
特点: 其一 作用范围 比较大 凡是该网页对应的标签,都会对css样式代码生效
2.id选择器
格式: #id名字{css样式代码;}
特点:2.1 id的名字必须是整个网页的唯一性名字 (不允许有重复的名字)
2.2 表示范围较小 ,只针对id名字所在的标签,css样式才会生效。
例如:对表格的某一行的某一个列进行设置背景颜色,可以考虑使用id选择器。
3.类选择器
格式: .类名称{css样式代码;}
特点: 3.1 表示范围 <= 标签选择器 >= id选择器
例如: 如果对应的标签(例如td),都写一个class属性,而且名字相同,相当于是标签选择器的范围
标签选择器 td{css样式代码;}
在某些情况下,只针对某一些td标签进行css样式更改
4.后代选择器
格式: 标签名/id选择器/类选择器 子标签的名字{css样式代码;}
特点: 4.1 作用范围,有可选性
5.伪类选择器
格式: 标签/选择器的名字 a标签:事件名字{css样式代码;}
例如: #nav a:hover{color:red; text-decoration:underline}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS常用的选择器</title>
<style type="text/css">
/*1.标签选择器*/
tr{
height: 100px;
}
a{
color: #999999;
text-decoration: none;
}
/*2.id选择器*/
#t1{
background:green;
}
/*3.类选择器*/
.t3{
text-align: center;
}
.t4{
background: red;
}
/*4.后代选择器*/
ul > span{
color: green;
}
/*5.伪类选择器*/
a:hover{
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<table border="1px">
<tr>
<td class="t2" width="150px">1</td>
<td class="t2" width="150px">2</td>
<td class="t2"width="150px">3</td>
</tr>
<tr>
<td class="t2">4</td>
<td class="t2" id="t1">5</td>
<td class="t2">6</td>
</tr>
<tr>
<td class="t3">7</td>
<td class="t3">8</td>
<td class="t3">9</td>
</tr>
<tr>
<td class="t2">10</td>
<td class="t2">11</td>
<td class="t4">12</td>
</tr>
</table>
<hr/>
<ul>
<li>
<span>你现在的努力,是为了将来有更多的选择!</span>
</li>
<span>经济基础,决定上层建筑!</span>
</ul>
<a href="#">百度一下</a>
</body>
</html>