将 css 应用于相邻元素

Posted 2023-05-08

【中文标题】将 css 应用于相邻元素

【英文标题】：applying css to adjacent element

【发布时间】：2022-01-17 00:15:59

【问题描述】：

大家好，如果我有一个像下面这样的 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>

我想更改具有 .check css 属性的元素的先前元素。 类似名称 -> *带有读取颜色的名称。

在 CSS 中可以吗？或者我需要和JS混合吗？

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

谢谢。

【问题讨论】：

您的.check 课程还有什么用途？你不能使用 css 来做你想做的事情，但是对 html/classes 进行一些小的重新排列，它会相对简单

不，我的意思是在父元素中添加check 类，并以css .check input .. 和.check > div:first-child color: red 等为例

我的建议是使用 jQuery。那里相当直截了当。但据我所知，我认为纯 CSS 无法实现。

.required display:none; .check .required display:block; 将在“check”添加到父元素时自动显示具有“必需”类的子元素。

如果您无法更改 HTML（正如您对 flex-direction 答案的评论所暗示的那样），请务必将其添加到问题中。会节省很多时间。

【参考方案1】：

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

input 标签不再在自己的 div 内 input 标记和包含标签的div 更改了位置。 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>

【讨论】：

感谢您的提示.. -> CSS 只能期待问题是这已经在运行服务.. 我无法按原样更改.. ;

【参考方案2】：

我不得不说 Gerard 的想法看起来不错，如果需要我会使用它，但也许您也可以尝试为您想要应用 CSS 的那些元素赋予类，这样您就可以直接选择这些元素。如果这不是您想要的，您也可以尝试使用 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 设置为一个或另一个。