HTML CSS 选择器入门

写给零基础的你：HTML和CSS选择器入门

想象一下，网页就像一栋房子。HTML就是房子的骨架——它决定了哪里是墙壁（段落文字），哪里是窗户（图片），哪里放家具（按钮）。比如这段基础代码：

<p>欢迎来到我的小屋！</p>
<img src="window.jpg">
<button>点击开门</button>

但光有骨架的房子不好看对吧？这时候就需要CSS来当装修工了！而CSS选择器就是装修工的"定位工具"，告诉它具体要装修哪里：

1. 标签选择器 - 按零件类型装修

   p { color: blue; } /* 所有段落文字变蓝色 */
   img { border: 1px solid black; } /* 所有图片加黑框 */
   

2. 类选择器 - 给特定零件贴标签装修 ```html 大按钮

   .big-btn { font-size: 20px; /* 只有带big-btn类的按钮会变大 */
     background: yellow;
   }
   

3. ID选择器 - 给唯一零件挂牌装修 ```html

   这是大门

   #main-door {
     width: 300px; /* 只针对这个特定大门 */
     border: 3px solid red;
   }
   

小技巧：选择器可以组合使用！比如：

div.special-room {  /* 只选择class="special-room"的div */
 background: lavender;
}

刚开始可能觉得像在学魔法咒语，但记住这个核心：HTML建结构 → CSS选目标 → 加样式。动手写几行代码试试，浏览器里按F12还能实时调试哦！

（提示：实际练习时建议使用VS Code等编辑器，保存为.html文件用浏览器打开查看效果）

---这篇文章用房屋装修的比喻解释概念，避免专业术语，提供了可直接复制练习的代码示例，符合面向零基础用户的需求。所有代码都保持原始HTML/CSS语法格式，未使用Markdown标注。