🌈 CSS 每日一练

🎯 今日重点：CSS 选择器艺术

✨ 基础选择器精粹

/* 元素选择器 - 为所有段落披上紫霞 */
p {
  color: #9c27b0;
}

/* 类选择器 - 给特殊元素戴上金冠 */
.highlight {
  background-color: #ffeb3b;
}

/* ID选择器 - 为王者加冕 */
#banner {
  font-size: 2rem;
}

🧩 组合选择器魔法

/* 后代选择器 - 深入巢穴的探险家 */
article p {
  line-height: 1.6;
}

/* 子元素选择器 - 直系血亲的传承 */
ul > li {
  border-left: 3px solid #4caf50;
}

/* 相邻兄弟选择器 - 惺惺相惜的伙伴 */
h2 + p {
  text-indent: 2em;
}

🌟 伪类选择器奇技

/* 交互魔法 */
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 结构选择智慧 */
li:nth-child(odd) {
  background-color: #f5f5f5;
}

/* 表单元素化妆师 */
input:focus {
  border-color: #2196f3;
  outline: none;
}

🏆 实战演练

<div class="gallery">
  <figure class="photo-frame">
    <img src="sunset.jpg" alt="落日余晖">
    <figcaption>点击查看大图</figcaption>
  </figure>
</div>

.gallery {
  display: grid;
  gap: 1rem;
}

.photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.photo-frame:hover {
  transform: scale(1.03);
}

.photo-frame:hover figcaption {
  bottom: 0;
}

figcaption {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  transition: bottom 0.3s ease;
}

💡 设计箴言

"优秀的CSS如同空气般存在 —— 用户察觉不到它的存在，却无时无刻不在享受它带来的舒适体验。"