时间戳

首页 > 解决方案 > 如果其类名与具有固定名称列表的父类名匹配，则显示直接子类

css - 如果其类名与具有固定名称列表的父类名匹配，则显示直接子类

问题描述

我学得少了，而且在原始 CSS 中总有一件事很乏味。通常，会有一个 div 用于指示应用程序的更多状态，如下所示：

<div class="result">
    <div class="success">Request processed OK.</div>
    <div class="error">There was an error processing request.</div>
    <div class="working">Sending your inquiry...</div>
</div>

现在我通常如何设计这是为.result反映当前状态的 div 分配类名。这里的动机是避免直接为元素设置 CSS 样式。

/** hide all child nodes by default**/
div.result>div {
    display: none;
}
/** when error state occurs, show the error div **/
div.result.error>div.error {
    display: block;
}

这个解决方案更健壮，因为它允许通过单个 CSS 类更改来完成其他更改。例如，您可以想象.error在整个表单甚至整个应用程序上设置它，并且它具有多种效果。

那么现在的问题是，是否可以使用 LESSdiv.result.error>div.error为每个类名生成序列？我想像：

.result {
        & > div {
            display: none;
        }

        LESS_FOR_EACH(error, success, working) &.$ENTRY > div.$ENTRY {
            display: block;
        }
}

标签： cssless

解决方案

CSS 变量如何处理这个问题：

.error {
  display:var(--error,none)!important;
}

.success {
  display:var(--success,none)!important;
}

.working {
  display:var(--working,none)!important;
}
<div class="result" style="--error:block">
    <div class="success">Request processed OK.</div>
    <div class="error">There was an error processing request.</div>
    <div class="working">Sending your inquiry...</div>
</div>

<div class="result" style="--working:block">
    <div class="success">Request processed OK.</div>
    <div class="error">There was an error processing request.</div>
    <div class="working">Sending your inquiry...</div>
</div>

您可以使用 SASS 轻松生成代码：

$classes: "error", "working","success";

@each $m in $classes {
  .#{$m} {
     display:var(--#{$m},none)!important;
  }
}

少

@classes: error, working, success;

each(@classes, {
  .@{value} {
     display: e(%("var(--%a,none)!important", @value));
  }
});

要直接回答您的问题，您可以执行以下操作

@classes: error, working, success;

.result {
   & > div {
       display: none;
   }
        
   each(@classes, {
     &.@{value} > div.@{value} {
        display: block;
     }
    });
}

推荐阅读