css的几种选择器

来源：互联网发布：软件代理的软件编辑：程序博客网时间：2024/05/16 05:32

1html的标签选择器

例如：

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;

}

3类选择器

例如：

.two{

font-size:50px;

color:#0F0;

background-color:#00C;

}

4关联选择器

可以理解为嵌套

例如

#one .two{

font-size:50px;

color:#0F0;

background-color:#00C;

text-decoration:underline

}

必须是id one里面的类two才可以显示效果

</div>

5组合选择器

#three,.four{

background-color:#0C3;

font-size:15px;

color:#FC0;

}

就是他们的显示效果一样

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>

<title>无标题文档</title>

#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>

<ul>

<liclass="menuDiv"></li>

<liclass="menuDiv"></li>

</ul>

</div>

<divid="five">

<ahref="www.baidu.com">百度</a>

</div>

</body>

</html>

阅读全文

0 0