<html>
<head>
<meta charset="utf-8" />
<title>css选择器</title>
<style type="text/css">
/*标签选择器*/
li{
font-size: 35px;
}
/*id选择器
#two 选择的是ID为two的元素
*/
#two{
color: red;
}
/*class选择器
.ls 选择的是class为ls的元素*/
.ls{
color: blue;
}
/*交叉选择器
li.ls选择的是标签是Li，并且class是ls的元素
或者说，选择的是class为ls的li标签
注意交叉选择器中间没有空格
div#hd 标签为div，id为hd的元素
p.abc 标签为p，class为abc的元素
*/
li.ls{
color: red;
}
/*子代选择器
li span选择的是li里面的span标签
注意：子代选择器中间要有空格
h1 .title 表示 h1标签里面（子元素）的class为title的元素
div p.hd 表示div里面的class为hd的p标签
*/
li span{
color: red;
font-size: 45px;
}
/*群组选择器
span, .ls选择的是span标签和class为ls的元素
*/
.ls, span, div#one{
color: red;
}
/*通用选择器
能选中所有的元素
*/
*{
color: red;
}
/*举例
.hot_box div.left_box ul li span.col
表示class为hot_box里面的class为left_box的div标签里面的ul里面的li里面的class为col的span标签
*/
/*伪类选择器
同一个html元素在不同状态下的不同样式
只有a和p元素可以使用 一般用于a标签
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接;
*/
a{
font-size: 50px;
color: blue;
}
a:hover{
font-size: 100px;
background: green;
color: white;
}
</style>
</head>
<body>
<a href="http://baidu.com">百度</a>
<span>我们是body里面的span标签</span>
<span>我们是body里面的span标签</span>
<p class="ls">我们是class为ls的P标签</p>
<p class="ls">我们是class为ls的P标签</p>
<p class="ls">我们是class为ls的P标签</p>
<!-- 页面中ID要保持唯一性 -->
<ul>
<li>我是第1个li标签</li>
<li id="two">我是第2个li标签</li>
<li class="ls">我是第3个li标签</li>
<li>我是第4个li标签<span>我是li里的span标签</span></li>
<li class="ls">我是第5个li标签</li>
<li>我是第6个li标签</li>
</ul>
</body>
</html> |
|
转播
