less 子元素获取焦点后修改父元素的样式

对于一个具有子元素的父元素，当子元素获取焦点时，可以使用CSS的伪类选择器来修改父元素的样式。具体的做法是，在父元素的样式表中使用`:focus-within`伪类选择器，然后定义想要修改的样式。

以下是一个示例：

HTML代码：

<div class="parent">
  <input type="text">
</div>

CSS代码：

.parent:focus-within {
  /* 在父元素获取焦点时修改样式 */
  border: 2px solid red;
}

在上述示例中，当文本输入框获取焦点时，父元素的样式会发生改变，边框会变为红色。

注意：`:focus-within`伪类选择器是CSS3新增的伪类选择器，它会匹配包含有焦点的任何子元素的父元素。但需要注意的是，不是所有的浏览器都支持该伪类选择器，所以在使用时需要考虑兼容性问题。

相关问题

less 子元素

如果你想要选中一个元素的所有直接子元素，可以使用 CSS 的 `>` 选择器。例如，如果你有一个父元素 `.parent` 和多个子元素 `.child`，你可以使用以下代码选中所有直接子元素：

.parent > .child {
  /* 样式 */
}

这样就可以对 `.parent` 元素下的所有 `.child` 元素应用样式。如果你想要选中所有子元素而不只是直接子元素，可以使用 CSS 的空格选择器。例如：

.parent .child {
  /* 样式 */
}

这样就可以选中 `.parent` 元素下的所有 `.child` 元素，包括嵌套在其他子元素中的元素。

less 直接子元素

在 Less 中，你可以使用 `>` 符号来选中一个元素的所有直接子元素，就像在 CSS 中一样。例如，如果你有一个父元素 `.parent` 和多个子元素 `.child`，你可以使用以下代码选中所有直接子元素：

.parent > .child {
  /* 样式 */
}

这样就可以对 `.parent` 元素下的所有 `.child` 元素应用样式。

注意，在 Less 中使用 `>` 符号时，你需要在两边加上空格，以避免 Less 将其解析为其他意思。例如，如果你想选中 `.parent` 直接子元素中的所有 `h1` 标签，你可以使用以下代码：

.parent > h1 {
  /* 样式 */
}

这样就可以选中 `.parent` 元素下所有直接子元素中的 `h1` 标签。