Question

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 &amp;&amp; !Mail.To.$pristine" class="">To field is required</span>
    <span ng-show="Mail.To.$error.required &amp;&amp; !Mail.To.$pristine" class="">To field is required 2</span>
    <span ng-show="Mail.Subject.$error.required &amp;&amp; !Mail.Subject.$pristine" class="ng-hide">Subject field is required</span>
    <span ng-show="Mail.Subject.$error.minlength &amp;&amp; !Mail.Subject.$pristine &amp;&amp; !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类AND同时是最后一个子节点。需要：选择不包含ng-hide类和最后一个子类的span，即只有第二个span。如果存在错误，只有CSS或其他方式显示填充的一些块错误。

Answer 1

正如评论中所提到的那样，只用CSS就很难实现。作为您尝试执行的操作的替代方法，您可以尝试通过选择具有ng-hide类的第一个元素来实现它，这更容易因为选择器只能选择的方式元素转发：

.validation-summary-errors > :not(.ng-hide) + .ng-hide

会立即在您尝试选择的元素之后选择元素，这意味着您可以翻转样式...在其上使用margin-top而不是之前的margin-bottom，等

这可能无法准确地提供您想要的内容，具体取决于您尝试设置元素的样式，但它可能会有效。

选择元素而不在容器中指定类，最后在其中

1 个答案: