将 css 应用于相邻元素

Question

大家好，如果我有一个 html 元素，如下所示

 <div> <div>Name</div> <div><input type="text" class="check"> <div>Age</div> <div><input type="number" class="check"></div> <div>address1</div> <div><input type="text"></div> </div>

我想更改之前的元素有。检查 css 属性。 像 Name -> *Name 和读取颜色的东西。

CSS 有可能吗？ 或者我需要与JS混合吗？

任何想法或建议将不胜感激。

谢谢。

Answer 1

这是一个可能的解决方案。 应用的更改：

• input标签不再在自己的div中
• 包含 label 的input标签和div更改为 position。 CSS 只能期待了。

 .container { display: flex; flex-direction: column-reverse; } input { width: 200px; } input.check+div { color: green; }

 <div> <div class="container"> <input type="text" class="check"> <div>Name</div> </div> <div class="container"> <input type="number" class="check"> <div>Age</div> </div> <div class="container"> <input type="text"> <div>address1</div> </div> </div>

Answer 2

我不得不说 Gerard 的想法看起来不错，如果需要我会使用它，但也许您也可以尝试为您想要应用 CSS 的元素提供类，因此您可以直接 select 那些元素。 如果这不是您想要的，您也可以尝试使用 ntn-child，如下所示：

<div class="my-class">
  <div>Name</div>
  <div><input type="text" class="check">
  <div>Age</div>
  <div><input type="number" class="check"></div>
  <div>address1</div>
  <div><input type="text"></div>
</div>

CSS

.my-class:nth-child(n) {
  color: red;
}

考虑到 n 是您要应用代码的子编号，因此根据您的父元素中有多少元素，您可以将 n 设置为一个数字或另一个数字。