<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*1元素选择器*/
div{
background-color: red;
}
/*2.class选择器/类选择器*/
.gfg{
color: red;
}
.eeeee{
text-align: center;
}
/*3.id选择器*/
#ds1{
color:aqua;
}
#ds2{
color:coral;
}
#ds3{
color:darkcyan;
}
#ds4{
color:hotpink;
}
/*4.*通配符/通配选择器 */
*{
maign:0;
padding:0;
}
/*5.群组选择器*/
h1,h2,h3{
color:firebrick;
}
/*6.包含选择器，后代选择器 从右向左 */
div span{
background-color: greenyellow;
color:deeppink;
}
/*7.伪类选择器
1.a:link{属性：属性值}超链接的初始状态；
2.a:visited{属性;属性值}超链接访问后的状态；
3.a:hover{属性：属性值}鼠标悬停，即鼠标划过超链接的状态；
4.a:active{属性：属性值}超链接被激活的状态，即鼠标按下时超链接的状态；
*/
</style>
</head>
<body>
<div>11111111111111111</div>
<p>1111111111111111111</p>
<p class="gfg eeeee">111111111</p>
<p>111111111</p>
<p class="gfg">2222222222222</p>
<p id="ds1">3333333333333</p>
<p id="ds2">33333333333333</p>
<p id="ds3">5555555555</p>
<p id="ds4">+++++++++++++</p>
<h1>1111</h1>
<h2>11111111111</h2>
<h2>111111111</h2>
<div>------------<span>33333333333</span>*********</div>
<a href="https://www.baidu.com/">百度</a>
<p>cx<a id="">/</a>0000000000</p>
<p>3333333333333</p>
<p>6666666666666</p>
<p>999999999999</p>
<p>55555555555555</p>
</body>
</html>
这篇博客详细介绍了CSS中的各种选择器，包括元素选择器、类选择器、ID选择器、通配符选择器、群组选择器、后代选择器以及伪类选择器的应用。通过实例展示了如何使用这些选择器来设置网页元素的样式，如颜色、对齐方式等。同时，文章还包含了超链接状态的伪类选择器用法。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
