將 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 設置為一個數字或另一個數字。