HTML:
<div class="validation-summary-errors text-danger">
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine">To field is required</span>
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine">To field is required 2</span>
<span ng-show="Mail.Subject.$error.required && !Mail.Subject.$pristine">Subject field is required</span>
<span ng-show="Mail.Subject.$error.minlength && !Mail.Subject.$pristine && !focusSubject">Subject length must be at least 3</span>
</div>
由 Angular HTML 生成
<div class="validation-summary-errors text-danger">
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine" class="">To field is required</span>
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine" class="">To field is required 2</span>
<span ng-show="Mail.Subject.$error.required && !Mail.Subject.$pristine" class="ng-hide">Subject field is required</span>
<span ng-show="Mail.Subject.$error.minlength && !Mail.Subject.$pristine && !focusSubject" class="ng-hide">Subject length must be at least 3</span>
</div>
CSS:
.validation-summary-errors > span:not(.ng-hide):last-child {
display: block;
margin-bottom: 20px;
}
问题: 这个 CSS 选择范围没有 ng-hide 类并且同时是最后一个 child 。 需要: 选择其中没有 ng-hide 类和最后一个 child 的跨度,即只有第二个跨度。 如果存在错误,请仅使用 CSS 或其他方式显示带有填充的 block 错误。
最佳答案
如评论中所述,仅使用 CSS 很难做到这一点。作为您正在尝试做的事情的替代方法,您可以尝试通过选择第一个具有 ng-hide
类的元素来尝试以另一种方式来实现它,因为这种方式更容易选择器只能选择元素的前向:
.validation-summary-errors > :not(.ng-hide) + .ng-hide
会在您现在尝试选择的元素之后立即选择该元素,这意味着您可以翻转样式。在其上使用 margin-top
而不是 margin-底部
在前一个等
这可能无法完全满足您的需求,具体取决于您尝试为元素设置样式的准确程度,但它可能会奏效。
关于css - 选择容器中没有指定类的元素,最后在其中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37212709/