基础选择器和综合选择器实例

最新推荐文章于 2022-07-24 18:21:07 发布

ppapplezero

最新推荐文章于 2022-07-24 18:21:07 发布

阅读量278

点赞数

文章标签： html 文档标签编码实例

本文链接：https://blog.csdn.net/ppapplezero/article/details/73648254

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
b{
color: blue;
}
#test{
color: red;
}
.test1{
color: green;
}
div .abc{
color: pink;
font-size: 50px;
}
div span{
font-size: 50px;
}
.xuanze span{
color: green;
text-decoration: underline;

}
.love>span{
color: red;
font-size: 50px;
}
div.tong,p{
color: blue;
font-size: 100px;
}
/*选择第一个目标元素*/
ul li:first-child {
color: red;
font-size: 50px;
}
/*选择最后一个目标元素*/
ul li:last-child {
color: blue;
font-size: 50px;
}
.qwd+{
color:red;
font-size: 50px;
}
</style>
</head>
<body>
<b>Html选择器</b>
<div class="test1">class选择器</div>
<div id="test">id选择器</div>
<div>
<em class="abc">aabbcc</em>
</div>
<div class="xuanze">
<span>第一层选择</span>
<div>
<span>第二层选择</span>
<div>
<span>第三层选择</span>
</div>
</div>
</div>
<div>
<span>first</span>
<div class="love">
<span>second</span>
<div>
<span>third</span>
</div>
</div>
</div>
<div class="tong">痛苦的一匹</div>
<p>痛苦的一pi</p>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</body>
</html>