Html 为什么CSS会忽略属性下的选择器

我有一个按钮：

Outline

，我想在它上面设置大纲，但所有其他按钮都不应该有大纲

如果给它一个类

b1

，并执行以下操作：

[dir="ltr"] .b1 {
    border: 0;
}
[dir="ltr"] .b1.outline {
    border-width: 1px;
}

.b2 {
  border: 0;
}
.b2.outline {
  border-width: 1px;
}

它没有大纲

但是，如果给它一个类

b2

，并执行以下操作：

[dir="ltr"] .b1 {
    border: 0;
}
[dir="ltr"] .b1.outline {
    border-width: 1px;
}

.b2 {
  border: 0;
}
.b2.outline {
  border-width: 1px;
}

它确实有一个轮廓

Codepen亲自查看：

---

为什么会发生这种情况？

这与特定性和

边框的使用有关：0。两组选择器的特异性适用于
border:0以不同的顺序排列<代码>边框
是一个速记属性，用于应用
边框宽度
、
边框样式
和
边框颜色
。应用
0
或
none
将删除所有这些属性的样式

在代码笔中，您有
按钮。大纲
，它在按钮边框的可见性中起着作用

您的第一组将按以下顺序应用：

按钮。应用的轮廓
-
边框样式
和
边框颜色
属性
[dir=“ltr”].b1
-使用
边框删除边框属性：0

[dir=“ltr”].b1.ouline
-
边框宽度应用，无颜色或样式

即使有宽度，边框也不可见，因为其他边框属性没有使其可见的值，例如颜色和样式


您的第二组将按以下顺序应用：

.b2
-使用
边框删除边框属性：0

按钮。应用的轮廓
-
边框样式
和
边框颜色
属性
.b2.ouline
-
边框宽度
已应用
边框是可见的，因为我们有使其可见的边框属性，即宽度、颜色、样式。
这是因为

border:0;

。。。翻译为：

边框顶部颜色：首字母；
边框顶部样式：首字母；
边框顶部宽度：0px；
右边框颜色：首字母；
右边框样式：首字母；
右边框宽度：0px；
边框底色：首字母；
边框底部样式：首字母；
边框底宽：0px；
左边框颜色：首字母；
左边框样式：首字母；
边框左宽度：0px；
边界图像源：初始；
边界图像切片：初始；
边框图像宽度：初始；
边界图像开始：初始；
边界图像重复：初始；

这意味着
边框样式
属性设置为
初始
，默认为
无
。宽度适用，但样式为
initial
=
none
。您需要将其设置为任何可渲染值，以便应用可见边框：

[dir=“ltr”].b1{
边界：0；
}
[dir=“ltr”].b1.大纲{
边框宽度：1px；
边框样式：实心；
}
添加[dir=“ltr”]时，它会更改规则的处理顺序

对于按钮1（无轮廓）：

对于按钮2（大纲）：

注意按钮。大纲是按钮1上的第三条规则，是按钮2上的第二条规则，因为特殊性改变了。
考虑CSS的规则。如果您有更多的嵌套级别，这将是优先考虑的。在您的情况下，
.b2
是基本级别，因此当您设置
按钮.outline
时，这将比
.b2
规则更重要，因此所有
.b2
元素都将具有大纲。如果要重写规则，必须调用
按钮.b2.outline
，而只调用
.b2

    /* BASE CLASSES */
    button {
        font-size: 1.7rem;
    }
    .outline { /* Only use one level */
        border-style: solid;
        border-color: #387ef5;
        color: #387ef5;
        background-color: transparent;
    }

    /* B1 + DIRECTION */
    [dir="ltr"] .b1 {
        border: 0;
    }
    [dir="ltr"] .b1.outline {
        border-width: 1px;
    }

    /* B2 NO DIRECTION */
    button.b2 { /* Be more specific to replace previous rule */
      border: 0;
    }
    button.b2.outline {
      border-width: 1px;
    }

因为带有
[dir=“ltr”]
选择器的样式具有更高的优先级

设置时：

[dir="ltr"] .b1 {border: 0}

您可以使
button.outline{…}
中所有特定于边框的声明作废。因此，您有一个
边框宽度
，但既没有
边框样式
也没有
边框颜色
，这都是非常必要的。
特殊性：：删除
.b1
之前的空格，行为也是一样的。这绝对是问题所在<代码>按钮。轮廓

比

.b2

更具体，因此您永远不会删除边框颜色。

边框宽度：1px本身不会设置边框。您正在删除
[dir=“ltr”]中的颜色和边框样式。b1
@Amit，您的CSS特性没有任何问题
[dir=“ltr”].b1.outline{}
将始终强于
[dir='ltr'].b1{}
。您只需要确保为显示边框设置了所有必需的属性。很酷的问题和有趣的边缘案例，顺便说一句，干杯！（不在此赘述）是的
[dir=“ltr”].b1.大纲
的层叠值比
[dir=“ltr”].b1
高，但这并不重要，因为
边框样式
已被
边框
速记覆盖。@JosephMarikle这正是我所说的<代码>边框样式

通过

边框：0设置为
初始
，即
无
。到底什么不清楚？不清楚，伙计。我认为这是正确的答案。不知道为什么会被否决。我重新措辞了，这样更清楚。但第一个解释是正确的。只是不那么清晰和大胆。：）你真的没有对这个问题给出正确的答案。问题是：[
dir=“ltr”].b1.outline{}
为什么不应用于
[dir=“ltr”].b1{}
。答案是：它正确地申请了
边框宽度。但是，
border:0将
border样式设置为
initial
属性。你的答案甚至没有触及问题的核心。当涉及到
border:0.b1
和.b2
选择器之间选择code>。虽然我同意答案应该更详细地说明
边框
属性。我会改进它。我不太欢迎你的“这仍然是一个特殊性问题”回复，以及你最初的“你”