Question

我有这样的HTML：

<div class="form-group">
    <input type="email" class="form-control>
    <div class="form-error">This is not valid email address</div>
</div>

如果输入有错误，我会动态打印div.form-error。

如果div.form-error中有div.form-group，我需要CSS代码才能使输入的边框变为红色。

我正在与SASS合作，也许它有一个功能来做到这一点。我正在寻找这样的东西：

.form-group {
    &:contains('.form-error') {
        input {
            border: 1px solid red;
        }
    }
}

我该怎么做？

Answer 1

好的，所以虽然我的评论仍然存在 - 但是根据后来的兄弟或后代，不可能使用CSS来设置前一个兄弟或祖先的风格 - 有一种解决方法。虽然在确实需要更改HTML时，它仍会模拟您在问题中发布的元素顺序。

也就是说，HTML改变如下：

<div class="form-group">
  <input type="email" class="form-control" />
  <div class="form-error">This is not valid email address</div>
</div>

要：

<div class="form-group">
  <div class="form-error">This is not valid email address</div>
  <input type="email" class="form-control" />
</div>

＆＃13;

.form-group {
  /* to use the flex layout model: */
  display: flex;

  /* to have the elements arranged
     in a column instead of a row
     (which you may or may not want): */
  flex-direction: column;

  /* aesthetics, adjust to taste: */
  width: 50%;
  border: 1px solid #000;
  margin: 0 0 0.5em 0;
}

.form-group .form-error {
  /* places the .form-error element(s)
     at the end of the layout in position
     2, which causes the <input> to take
     position 1; note that the elements
     are still in the same place for CSS
     selection: */
  order: 2;
}


/* This styles the email <input> element if
   it follows the .form-error element: */
.form-error + input[type=email] {
  border-color: red;
}

＆＃13;

<div class="form-group">
  <div class="form-error">This is not a valid email address</div>
  <input type="email" class="form-control" />
</div>

＆＃13;

顺便提一下，值得注意的是，根据caniuse.com，所有当前浏览器都提供了flexbox;虽然您的用户在编写时可能尚未将自己的浏览器更新为当前（或以前的）版本。

当然，还有其他方法可以使用:invalid伪类来实现这一点：

＆＃13;

/* Selects any <input> element whose value is invalid: */
input:invalid {
  border-color: red;
}

＆＃13;

<div class="form-group">
  <input type="email" class="form-control" />
  <div class="form-error">This is not a valid email address</div>
</div>

＆＃13;

当然，您甚至可以使用淡入淡出来显示或隐藏错误消息：

＆＃13;

/* Selects any <input> element whose value is invalid: */

input:invalid {
  border-color: red;
}

/* hides the .form-error element using the opacity
   property which takes a value, which allows it
   to be animated from hidden (opacity: 0) to shown
   (opacity: 1): */
.form-error {
  /* visually hidden: */
  opacity: 0;
  /* specifies that the opacity property should be
     transitioned over a 0.3 second time in a linear
     animation: */
  transition: opacity 0.3s linear;
}
/* Selects the .form-error element that immediately
   follows an <input> which is :invalid */
input:invalid+.form-error {
  opacity: 1;
}

＆＃13;

<div class="form-group">
  <input type="email" class="form-control" />
  <div class="form-error">This is not a valid email address</div>
</div>

＆＃13;

参考书目：

＆＃34; Using CSS Flexible Boxes＆＃34;

Answer 2

正如评论中的人们正确指出的那样，您需要更改标记以使其正常工作。您可以使用sibling选择器： https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

.form-group {
    .form-error + input {
        border: 1px solid red;
    }
}

＆＃13;

.form-error + input {
    border: 1px solid red;
}

＆＃13;

<div class="form-group">
    <div class="form-error">This is not valid email address</div>
    <input type="email" class="form-control" />
</div>

＆＃13;

Answer 3

您可以使用child selectors和sibling selectors。

对于你的例子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="personDetails">
    <input type="text" class="abc" id="Name1">
    <input type="text" class="abc" id="Age1">
  </div>
  <br /><br />
  <div class="personDetails">
    <input type="text" class="abc" id="Name2">
    <input type="text" class="abc" id="Age2">
  </div>
  <button onclick="getDetails()">Check Value</button>
</div>

是否有一个选择器处理“该元素包含一个具有类的元素”

3 个答案: