javascript - 样式表未正确应用于元素

Question

首先，很抱歉没有提供所有需要的代码。让我解释一下原因，这不仅仅是因为私有(private)信息和代码......这个元素真的很广泛，而且都是在没有任何框架的情况下手工编码的，所以完美重现完全相同情况的唯一方法就是拥有整个元素，所以我的话是唯一的引用。

好的...让我们开始...

我有一个更改所有按钮的样式表:

button{
    font-family: 'autobus';
    font-size: 15px;
    background: rgb(8,77,110);
    border: 1px solid rgb(231,235,245);
    color: rgb(231,235,245);
    border-radius: 3px;
    cursor: pointer;
}

还有一些其他的改变真正特定的按钮:

.innerForm > button {
    margin-top: -25px;
    margin-right: -25px;
    float: right;
    font-size: 30px;
    border: none;
    background: none;
    cursor: pointer;
}

在开发了我的系统的一部分之后，我可以通过一些输入和按钮添加一些包含输入和按钮的元素，我意识到某些东西确实具有意外行为......

_{(来源:fbcdn.net)}

如您所见，只有在新添加的“输入+按钮”上，按钮才符合 CSS ......我在添加元素后才意识到已经从服务器构建的元素具有不同的样式，因为我'我喜欢没有背景的它们...无论如何，如您所见，它们在浏览器 html 中完全相同:

_{(来源:fbcdn.net)}

没有类...只有一个 onclick 属性调用 javascript 函数来删除元素。所有其他“特定按钮样式化”都有

cursor: pointer;

虽然这些无背景按钮甚至不会改变光标外观...

如果不是乱七八糟的，我都懒得来这里问了。

任何其他需要的信息，只需评论，我可以编辑添加它。

所以...有人见过类似的东西吗？

PS:如果有人回答为什么 javascript 添加的元素没有在 HTML 上显示它是“value='21/12/2019'”并且仍然在可视界面上显示它，我也会赞成解释。如果主要问题没有得到正确的答案，如果有人回答正确，我将投票这个“值(value)问题”解释作为答案。

Answer 1

是的，标签名称拼错了。按钮选择器正在选择所有拼写为按钮的标签。如果您有一个额外的按钮选择器，它应该会选择样式，尽管这肯定不是您要找的。

通过验证工具运行 html 始终是个好主意。只需谷歌 HTML Validtor。他们中的任何一个都应该解决。此外，最好为您的 JS 使用 linter 来帮助发现任何潜在的错误。

由 JS 生成的 html 代码也应该在开发控制台中可用。在像这样的许多情况下，最好使用开发控制台而不是查看页面源代码。

关于 CSS 的额外说明是，如果您需要支持旧版浏览器，请使用诸如 AutoPrefixer 之类的工具来应用 vendor 前缀。

希望对您有所帮助!