css - 选择容器中没有指定类的元素，最后在其中

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 类并且同时是最后一个 child 。需要:选择其中没有 ng-hide 类和最后一个 child 的跨度，即只有第二个跨度。如果存在错误，请仅使用 CSS 或其他方式显示带有填充的 block 错误。

Answer 1

如评论中所述，仅使用 CSS 很难做到这一点。作为您正在尝试做的事情的替代方法，您可以尝试通过选择第一个具有 ng-hide 类的元素来尝试以另一种方式来实现它，因为这种方式更容易选择器只能选择元素的前向:

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

会在您现在尝试选择的元素之后立即选择该元素，这意味着您可以翻转样式。在其上使​​用 margin-top 而不是 margin-底部在前一个等

这可能无法完全满足您的需求，具体取决于您尝试为元素设置样式的准确程度，但它可能会奏效。