03 css选择器

学前端的坤坤bond

于 2024-07-17 14:17:38 发布

阅读量78

点赞数 3

文章标签： javascript css css3 微信 facebook

本文链接：https://blog.csdn.net/m0_64904350/article/details/140493861

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>类选择器</title>
<style type="text/css">
/*
ID选择器类似于类选择器,但也有一些差别。
相同点:类选择器和ID选择器在定义和使用时都是区分大小写。
主要区别：
(1)定义上ID选择器前面使用“#"号，而不是类选择器的点。
(2) ID选择器在引用时不是通过class属性,而是使用id属性。
(3)在一个HTML文档中,ID选择器仅允许使用一次,而类选择器可以使用多次。
(4) ID选择器不能结合使用,因为ID属性不允许有以空格分隔的词列表。
*/

#p1 {
color: red;
font-size: 25px;
}
#p2 {
font-size: 36px;
text-decoration: underline;
color: green;
}
/* 类选择器 */
.p1 {
color: #a93e3e;
font-size: 30px;
font-family: "黑体";
}
.p2 {
color: blueviolet;
font-size: 40px;
font-weight: bold; /* Normal 为正常; italic 为斜体; oblique 为倾斜 */
font-style: oblique; /* Normal 为正常; lighter 为细体; bold 为粗体; bolder 为特粗体 */
}
div {
background-color: rgb(184, 229, 229);
font-size: x-large;
font-family: "宋体";
}
</style>
</head>
<body>
<h2 id="p1">hello</h2>
<h2 id="p2">hello</h2>
<div>阿斯顿撒旦</div>
<p class="p1">阿松大</p >
<p class="p2">阿萨大大</p >
</body>
</html>