CSS选择器简单说明(元素|ID|类)

元素选择器

将html元素作为选择器,例如h1,p,body,a,span 等元素

<!--元素选择器-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素选择器示例</title>
<style type="text/css">
body{
background-color:black;
}
h1{
color:white;
text-align:center;
font-family:"楷体";
}
p{
color:white;
font-size:30px;
font-family:"宋体"
text-align:center
}
</style>
</head>
<body>
<h1>元素选择器示例标题</h1>
<p>元素选择器示例段落>/p>
</body>
</html>

 id选择器

id选择器以# 定义,例如#css1css1 只是我为id选择器随便取的名称,可以自行更改,id选择器名称不能以数字开头,且id选择器只能为单一html元素使用

<!--ID选择器-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器示例</title>
<style type="text/css">
#css1{
background-color:black;
}
#css2{
color:white;
text-align:center;
font-family:"楷体";
}
#css3{
color:white;
font-size:30px;
font-family:"宋体"
text-align:center
}
</style>
</head>
<body id="css1">
<h1 id="css2">元素选择器示例标题</h1>
<p id="css3">元素选择器示例段落>/p>
</body>
</html>

 类选择器

类选择器以. 定义,例如.aa 是我为类选择器随便取的名称,可自行更改,类选择器名称不能以数字开头,类选择器不同id选择器,它可以为多个html元素使用

<!--类选择器-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器示例</title>
<style type="text/css">
.a{
background-color:black;
}
.b{
color:white;
text-align:center;
font-family:"楷体";
}
.c{
color:white;
font-size:30px;
font-family:"宋体"
text-align:center
}
</style>
</head>
<body class="a">
<h1 class="b">元素选择器示例标题</h1>
<p class="c">元素选择器示例段落>/p>
</body>
</html>

 总结

上面的三个示例展示效果都是一样,只是选择器不同,更容易让大家看到各选择器的区别,自行新建名为.html 的文件将示例代码复制保存后即可点击运行查看效果,选择器还有很多其它用法我就不细说了,先给一个简单的概念,能看懂后面我发的东西就好

版权声明:
作者:HONG
链接:https://www.honglog.com/158.html
来源:小洪博客
本站遵循cc共享许可协议:BY-NC-SA 4.0 转载请注明出处
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录