html - 如何使隐藏的边框边继承 CSS 中的边框属性

Question

我在 CSS 中遇到了动态边框的异常问题。我试图通过将其宽度设置为零 border-left-width:0; 或使用 border-left: 来“恢复”/显示已被禁用的边框的某一侧:无；

问题是我不想重复相同的边框属性，因为它应该是一个自适应动态解决方案，隐藏边框应该继承 元素已经设置边框。

示例代码:JSFiddle

/* ================== chic ==================  */

body, html {
    margin: 0;
    padding: 0;
    font-family:Verdana, sans-serif;
    height: 100%;
    text-align: center;font-weight: bold;
    background:#62726b;
    color:#abd4b1;
}

div {
    padding:50px;
    position: absolute;
    left:0;
    right:0;
    margin: 0 auto;
    width:50%;
    top:50%;
    transform:translateY(-50%);
}

/* ============= setting border =============  */

div {
    border:5px dashed #abd4b1;
    border-right:none;   /* hide right border */
    border-left-width:0; /* hide left border by setting width to zero */
}

/* restoring borders */

div {
    border-right: inherit;      /* attempt 1 - make border inherit previous properties */
    border-right: initial;      /* attempt 2 - resest border to initial state */
    border-left-width: inherit; /* attempt 3 - inherit the border width */
    border-left-width: initial; /* attempt 4 - reset border width to initial state */
}

<div>ALL YOUR BORDERS ARE BELONG TO US</div>

观察 1:边界边不会继承其“父”边界

观察 2:使用 initial 将边框重置为浏览器默认值(我想这是合乎逻辑的)

所以真正的问题是是否可以使用纯 CSS 显示隐藏/禁用的边框而不重复两次边框属性？

Answer 1

So the question really is can a hidden/disabled border side be shown using pure CSS without repeating the border property twice?

我怀疑你真正的问题是，正如你的评论所给出的那样，

interesting, a class toggle does the trick, now is there a way to simulate that by css override instead of class?

... 答案是否定的，因为这不是级联的工作方式。在任何给定时间，一个元素的属性只能有一个值。因此，要么元素有边框，要么没有，这取决于解析所有与该元素匹配的边框声明并找出哪个 的匹配声明获胜。

inherit 不起作用，因为没有可继承的父边框。 (从技术上讲，只是将其设置为 medium none currentColor 的初始值，这就是被继承的内容。)

initial 不起作用，因为 border-width 和 border-style 的初始值同样是 medium 和 none 分别——只有其中一个实际上禁用了边框；另一个将其设置为任意非零宽度。 (另外，this has nothing to do with browser defaults。)

在 CSS 属性的多个可能值之间切换的唯一方法是在分配给同一元素的多个可能类名之一中声明每个值:

div {
    border: 5px dashed #abd4b1;
}

div.norightborder {
    border-right-style: none; /* hide right border */
}

div.noleftborder {
    border-left-width: 0; /* hide left border by setting width to zero */
}

...这也使用了覆盖规则，除非是有意的。第一条规则保证匹配元素，只要它是一个div；后两条规则仅在类名存在时才匹配，并且由于更具体而覆盖第一条，但第一条规则及其速记声明指定的值未受影响，恢复它们只是省略类名的问题，或者至少在事后删除它们。