Html 方法找出CSS行为背后的原因

我想知道为什么一些CSS属性没有像预期的那样应用于html元素。我并不是在试图解决一个特定的问题，但我正在寻找一个可以遵循的通用方法

如上面的屏幕截图所示，当宽度等于或超过40 rem时，我将应用一个媒体查询

但是我想应用到plan类的宽度是30%，这没有应用，但是定义为plan类属性的100%宽度仍然应用

---

尽管检查器显示了划掉的属性，但是否有工具可以找出未应用该属性的原因？

样式列表的显示顺序与应用方式相反

您可以看到顶部的样式集是

style

属性，它是空的

下一个是

.plan

并设置

宽度：100%

下一个是媒体查询中的

.plan

，由于上一个而被覆盖

---

您可以看到一个简单的视图，但重点是特定的属性，但查看“计算”选项卡并单击感兴趣的属性旁边的三角形以展开列表

---

---

请参见CSS规范中有关应用顺序属性的说明。

样式列表的显示顺序与应用顺序相反

您可以看到顶部的样式集是

style

属性，它是空的

下一个是

.plan

并设置

宽度：100%

下一个是媒体查询中的

.plan

，由于上一个而被覆盖

---

您可以看到一个简单的视图，但重点是特定的属性，但查看“计算”选项卡并单击感兴趣的属性旁边的三角形以展开列表

---

---

请参阅CSS规范中有关应用了哪些订单属性的说明。

您实际上有

计算的
选项卡，以查看是什么设置了实际样式，可能是因为默认的
.plan
样式是在媒体查询之后才应用的样式。您能详细说明一下吗？您应该将媒体查询移到您的CSSYE末尾，先生。我发现这就是原因。我想知道的是，在chrome或任何其他浏览器中是否有任何工具可以显示（某些提示或工具提示）为什么样式被删除而不被应用？是的，
computed
选项卡列出了每种样式，对于每种样式，您可以看到按优先级排序的值列表。实际上，您可以使用
computed
选项卡查看是什么设置了实际样式，可能是因为默认的
.plan
样式是在媒体查询之后才应用的样式。您能详细说明一下吗？您应该将媒体查询移到您的CSSYE末尾，先生。我发现这就是原因。我想知道的是，chrome或任何其他浏览器中是否有任何工具可以显示（某些命令或工具提示）为什么删除某个样式而不应用？是的，
computed
选项卡列出了每个样式，对于每个样式，您可以看到按优先级排序的值列表好的，非常感谢。因此，如果我理解正确，如果满足媒体查询条件，在本例中，宽度超过40 rem，则将应用指定的样式。但是，如果有另一种样式适用于同一个元素，那么它将被应用，而不考虑媒体查询风格已经被应用的事实，因为它的条件被满足了。它确实考虑了先前的样式（尽管它在媒体查询中的事实对规则没有影响）。后一条规则也有同样的特殊性，那就赢了。好的，非常感谢。因此，如果我理解正确，如果满足媒体查询条件，在本例中，宽度超过40 rem，则将应用指定的样式。但是，如果有另一种样式适用于同一个元素，那么它将被应用，而不考虑媒体查询风格已经被应用的事实，因为它的条件被满足了。它确实考虑了先前的样式（尽管它在媒体查询中的事实对规则没有影响）。而具有相同特异性的后一规则获胜。