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

最新推荐文章于 2023-03-31 19:52:27 发布

__如影随行

最新推荐文章于 2023-03-31 19:52:27 发布

阅读量339

点赞数

分类专栏：初学者之css学习

本文链接：https://blog.csdn.net/u010732674/article/details/53143005

版权

初学者之css学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

__如影随行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学者之CSS学习（二）CSS选择器

css选择器/*标签选择器*/li{font-size: 35px;}/*id选择器#two 选择的是ID为two的元素*/#two{color: red;}/*class选择器.ls 选择的是class为ls的元素*/.ls{color: blue;}/*交叉选择器li.ls选择的是标签是Li，并且class是ls的
复制链接

扫一扫