为什么在选择html元素时必须精确？

我正在做一个教程，它将产生一个奇特的基于html5/css3/js的计算器。这是我以前从未遇到过的事情——我尝试过以不同的方式设置操作符元素的样式，这样就可以很容易地将它们与其他键（如0-9）区分开来

我已经输入了CSS.keys.operator并添加了一个不同的背景属性。然而，它没有起作用

然后我试着更具体一些，比如.keys span.operator

这起作用了。然而，这给我留下了问号

我的问题:

为什么在这种情况下，我需要如此具体，否则CSS不会吞并background属性

为什么我不能单独键入运算符类

我认为通过键入.keys.operator，我可以在任何具有.keys类的元素中选择每个具有.operator类的html元素

对我来说这听起来合乎逻辑，但没有用

如果我要按照CSS强制给我的思路去做，那么理论上我需要更精确地编写div.keys span.operator，但在教程中它是不需要的

有人能给我解释一下原因吗

以下是我正在编写的代码：

---

我只是看了一眼，如果我把你的接线员前面的跨度去掉，对我来说没问题。您的浏览器可能有问题。我用的是铬金丝雀。这里有一个指向画笔的链接：

您使用的是更精确的画笔。CSS选择器越“精确”，它就越优先于选择相同元素但精度较低的其他CSS

最有可能的是，它下面的CSS覆盖了您提供的CSS，或者CSS文件中某个地方的CSS更精确

例如，span不如span.MyClass具体，因此span.MyClass将优先于span。任何款式都可以！重要属性是自动赢得任何东西，但应该很少使用

查看CSS文档或在浏览器中检查它，看看哪些类影响该元素

---

查看此链接：

我们需要查看问题中的html和css。我知道，但这会占用太多空间，无法在此预览，因此我决定使用codepen。对不起，如果我把ppl弄糊涂了。不是全部，只是相关的部分。谢谢你的回复：。我知道这一点，并检查了我的代码，但实际上找不到使用带有“operator”类的“key”的任何其他元素。就是这个组合。我觉得这已经很具体了。我也不明白为什么仅仅选择“operator”类就不能设计我的小操作和评估键。我在codepen中展示的代码是我在遵循教程时键入的全部代码。您尝试使用什么颜色作为运算符键？它们对我来说是红色的。是的，我想使用FFF0F5颜色，当我键入.keys span.operator时，一切都正常，但当我只键入.keys.operator时，一切都不正常。我不明白原因。运算符已经属于一些span元素，所以样式化.operator本身或.keys.operator应该可以工作，但它不能工作，我想知道为什么我可以从chrome中得到一个关于如何使用开发人员工具来确定哪个类影响该元素的提示？或者您正在使用比chrome默认开发工具更好的特定插件：选项1：在页面上单击鼠标右键，然后单击“检查元素”。选项2：在Mac上按Ctrl+Shift+J或Cmd+Opt+J打开DevTools并将焦点转移到控制台。我在Windows 8.1的标准桌面模式下使用最新的Google chrome。当我在“运算符”类之前删除“span”元素时，它对我也起作用，但为什么我不能在选择要添加参数的对象时“跳过”span元素呢？“运算符”类已分配给span元素，因此选择.keys.operator应该正确操作吗？：