为啥此样式代码在样式标签之间不起作用？
Posted
技术标签:
【中文标题】为啥此样式代码在样式标签之间不起作用？【英文标题】：Why does this styling code not work between style tags?为什么此样式代码在样式标签之间不起作用？ 【发布时间】：2019-12-03 18:26:57 【问题描述】：我正在尝试使用 ContextMenu.js 来显示一个弹出菜单，但此代码不起作用。我从这里获取了这段代码：https://codepen.io/Iamafro/pen/bLqyGd
我想要相同的功能，但是当我将它写入单个文件时它不起作用。 这种格式：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script> all the java script code from above link goes here </script>
<style> all the css code from above link goes here </style>
</head>
<body>
all the html code from above link goes here
</body>
</html>
【问题讨论】：
请发布您的完整代码。另请注意，该示例具有 SCSS 而不是 CSS 代码。如果没有一些额外的东西，简单地把它放在一个样式标签中肯定是行不通的。 要查看编译的 CSS 代码，您可以单击 Codepen 上 CSS 窗口中的向下箭头。然后您可以将该代码放在样式标签中。 这个问题其实不是contextmenu.js，甚至不是编码问题。这就是为什么 Codepen 的样式代码在样式标签中不起作用的原因。 【参考方案1】：它没有按您期望的方式工作，因为 Codepen 上显示的样式代码是 SCSS，而不是 CSS。在呈现给浏览器之前需要将其编译为 CSS。
在 Codepen 上打开样式窗口右上角的菜单以显示编译后的 CSS。
你可以把CSS代码放在<style></style>标签之间，就可以了。
如果你想使用 SCSS，你必须在服务器上对其进行预处理。
【讨论】：
【参考方案2】：你在正文之前保留了脚本，所以它没有找到元素，因为它不存在。
将格式更新为：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style> all the css code from above link goes here </style>
</head>
<body>
all the html code from above link goes here
<script> all the java script code from above link goes here </script>
</body>
</html>
此外，您必须对编写的 SCSS 进行预处理，以便正确获取 CSS。
【讨论】：
以上是关于为啥此样式代码在样式标签之间不起作用？的主要内容，如果未能解决你的问题，请参考以下文章
为啥 /**/ 注释在样式表中起作用，而 // 注释却不起作用？