1html的标签选择器
例如:
p标签
p{
font-size:1cm;
color:red;
]
h2标签
h2{
font-size:1cm;
color:red;
}
2id选择器
例如:
#mk{
width:800px;
height:35px;
margin:0px;
clear:both;
background:#ff00ff;
}
<div id="mk">
3类选择器
例如:
.two{
font-size:50px;
color:#0F0;
background-color:#00C;
}
<p class="two">sss</p>
4关联选择器
可以理解为嵌套
例如
#one .two{
font-size:50px;
color:#0F0;
background-color:#00C;
text-decoration:underline
}
必须是id one里面的类two才可以显示效果
<div id="one">
<p class="two">ggg</p>
</div>
5组合选择器
#three,.four{
background-color:#0C3;
font-size:15px;
color:#FC0;
}
<div id="three">aa</div>
<div class="four">bb</div>
就是他们的显示效果一样
6伪元素选择器
a:link{
font-size:1cm;
color:red;
}
a:hover{
font-size:2cm;
color:yellow;
}
a:visited{
font-size:3cm;
color:#0FF;
}
link:访问前的效果
hover:鼠标放上去的效果
visited:点击访问后的效果
给个例子如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#menu{
width:800px;
height:35px;
margin:0px;
clear:both;
background:#ff00ff;
}
#menu ul{
float:left;
list-style:none;
margin:0px;
}
#menuul li{
float:left;
display:block;
line-height:35px;
margin:0px 10px;
}
.menuDiv{
width:1px;
height:35px;
background:#3F0;
}
#one .two{
font-size:50px;
color:#0F0;
background-color:#00C;
text-decoration:underline
}
#three,.four{
background-color:#0C3;
font-size:15px;
color:#FC0;
}
#fivea:link{
font-size:1cm;
color:red;
}
#five a:hover{
font-size:2cm;
color:yellow;
}
#fivea:visited{
font-size:3cm;
color:#0FF;
}
</style>
</head>
<body>
<div id="one">
<p class="two">他们</p>
</div>
<div id="three">你们</div>
<div class="four">我们</div>
<div id="menu">
<ul>
<li><a href="#">网站首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">参加培训</a></li>
<li class="menuDiv"></li>
<li><a href="#">免费视频</a></li>
<liclass="menuDiv"></li>
<li><a href="#">学习资源</a></li>
<li class="menuDiv"></li>
<li><a href="#">语言分类</a></li>
<li class="menuDiv"></li>
<li><a href="#">进入论坛</a></li>
<liclass="menuDiv"></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
<divid="five">
<ahref="www.baidu.com">百度</a>
</div>
</body>
</html>