:placeholder-shown和:focus-within这两个伪类你有使用过吗？说说看

:placeholder-shown 和 :focus-within 是非常有用的CSS伪类，它们可以帮助我们创建更交互式和用户友好的Web界面。我来分别解释一下它们的用法和一些应用场景：

:placeholder-shown

这个伪类选择器针对的是包含占位符文本且当前正在显示占位符的表单元素。换句话说，当用户输入内容或者元素获取焦点时，这个伪类就不再匹配。

• 用途： 主要用于设置占位符文本的样式，并在用户输入内容后改变样式。这比直接设置 ::placeholder 伪元素更灵活，因为它可以控制与占位符相关的其他元素的样式。

• 示例：

input:placeholder-shown {
  border: 2px solid gray; /* 输入框未输入内容时，边框为灰色 */
}

input:not(:placeholder-shown) {
  border: 2px solid blue; /* 输入框有内容时，边框为蓝色 */
}

input:placeholder-shown + label {
  color: gray; /* 仅当占位符可见时，label 的颜色为灰色 */
}

在这个例子中，当输入框显示占位符时，边框颜色为灰色，关联的label颜色也为灰色。一旦用户开始输入，占位符消失，边框颜色变为蓝色，label的颜色会恢复默认样式 (除非你另外设置)。

:focus-within

这个伪类选择器针对的是元素本身或其后代元素获得焦点的情况。这意味着，即使焦点在子元素上，父元素也会匹配 :focus-within。

• 用途： 常用于创建更具视觉吸引力的表单交互，例如高亮整个表单区域、显示隐藏的帮助文本等。

• 示例：

.form-group:focus-within {
  background-color: lightblue; /* 当表单组内的任何元素获得焦点时，背景颜色变为浅蓝色 */
}

.form-group:focus-within .help-text {
  display: block; /* 当表单组内的任何元素获得焦点时，显示帮助文本 */
}

.form-group .help-text {
  display: none; /* 默认情况下隐藏帮助文本 */
}

在这个例子中，当表单组内的任何元素（例如输入框、下拉菜单等）获得焦点时，整个表单组的背景颜色会改变，并且帮助文本会显示出来。

总结

placeholder-shown 对于控制占位符相关的样式非常有用，而 focus-within 则可以让我们创建更丰富的焦点交互效果，提升用户体验。它们都是现代CSS中非常实用的伪类选择器。

希望以上解释能够帮助你理解这两个伪类的用法！