是否有处理选择“的元素包含类的元素”

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-group中有div.form-error，我需要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> 

.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; 
 
}

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

另外值得注意的是，根据caniuse.com，Flexbox的目前全部可用浏览器;尽管您的用户可能没有将自己的浏览器更新为当前（或之前）版本。

有，当然，你可以做到这一点只需使用:invalid伪类的其他方式：

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

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

，当然，你甚至可以用衰落来显示或隐藏错误消息：

/* 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; 
 
}

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

参考书目：

• “Using CSS Flexible Boxes”。

Answer 2

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

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

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

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

Answer 3

您可以使用child selectors和sibling selectors。

对于示例：

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