您的位置：首页 > Web前端 > CSS

初学者之CSS学习（二）CSS选择器

2016-11-12 20:56 309 查看

<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>
我们是body里面的span标签
我们是body里面的span标签

我们是class为ls的P标签
我们是class为ls的P标签
我们是class为ls的P标签


<ul>
<li>我是第1个li标签</li>
<li id="two">我是第2个li标签</li>
<li class="ls">我是第3个li标签</li>
<li>我是第4个li标签我是li里的span标签</li>
<li class="ls">我是第5个li标签</li>
<li>我是第6个li标签</li>

</ul>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航