【CSS选择器简介】
本帖最后由 书香 于 2023-5-21 02:35 编辑<!DOCTYPE html>
<html>
<head>
<title>第3个程序</title>
</head>
<body>
<h1>我是第1行</h1>
<h1>我是第2行</h1>
<h2>我是第3行</h2>
</body>
</html>
运行后效果
https://shuxiangyage.net/forum.php?mod=image&aid=413&size=300x300&key=afb15a4f7f932b3c&nocache=yes&type=fixnone
很多朋友可能发现了，这里没有换行符<br>为啥自动换行了，因为<h1>和<h2>组件（标签）自带换行属性
css是控制html组件（标签）属性的，那么css要如何锁定这个组件
常见的有3种
①:标签选择器（标签名{}）
我们现在要改变前2行的颜色，这两行用到的组件（标签）都是h1，我们可以使用标签选择器，对所有的<h1>标签起效果
h1{
color: red
}
<html>
<head>
<title>第10个程序</title>
<style type="text/css">
h1{
color: red
}
</style>
</head>
<body>
<h1>我是第1行</h1>
<h1>我是第2行</h1>
<h2>我是第3行</h2>
</body>
运行后效果
https://shuxiangyage.net/forum.php?mod=image&aid=414&size=300x300&key=0684dde78dc451a4&nocache=yes&type=fixnone
②：类选择器（.+class名）
<!DOCTYPE html>
<html>
<head>
<title>第10个程序</title>
<style type="text/css">
.css1{
color: red
}
</style>
</head>
<body>
<h1 class="css1">我是第1行</h1>
<h1>我是第2行</h1>
<h2 class="css1">我是第3行</h2>
</body>
</html>
运行后结果
https://shuxiangyage.net/forum.php?mod=image&aid=415&size=300x300&key=d44007a8d6289b77&nocache=yes&type=fixnone
③：id选择器（#+id名）
<html>
<head>
<title>第10个程序</title>
<style type="text/css">
#css1{
color: red;
}
</style>
</head>
<body>
<h1 >我是第1行</h1>
<h1>我是第2行</h1>
<h2 id="css1">我是第3行</h2>
</body>
运行后效果
https://shuxiangyage.net/forum.php?mod=image&aid=416&size=300x300&key=bb24a4e8bc9e8224&nocache=yes&type=fixnone
重点：每个组件的id一般是唯一的，class可以通用
下方代码被认为是不规范的
<h1 id="css1">我是第2行</h1>
<h2 id="css1">我是第3行</h2>
下方代码被认为是允许的
<h1 class="css1">我是第2行</h1>
<h2 class="css1">我是第3行</h2>
（点击返回课程目录：https://www.52hb.com/thread-58658-1-1.html） 谢谢分享
页:
[1]