html - 不应用 CSS 类?

标签 html css twitter-bootstrap

我在文档头部定义的 CSS 类似乎没有被识别或应用。知道我遗漏了什么或做错了什么吗?

JS Fiddle

<html>
  <head>
      <title>EXAMPLE</title>
      <style>
          .show_x
          {
              visibility: visible;
          }
          //
          .hide_x
          {
              visibility: hidden;
          }
      </style>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
        <span class="hide_x glyphicon glyphicon-warning-sign text-danger"></span>
        <span class="glyphicon glyphicon-warning-sign text-danger" style="visibility: hidden;"></span>
    </body>
</html>

我希望看到两个警告标志,但我看到了第一个。第二个被妥善隐藏了。

最佳答案

内联注释在 CSS 中不起作用,所以你有

      .show_x
      {
          visibility: visible;
      }
      // <-- invalid CSS
      .hide_x
      {
          visibility: hidden;
      }

这可能会使浏览器停止处理该 CSS block ,方便地就在两者中更可见(或更不可见)之前......无论如何,当它隐藏东西时应用时更容易看到......你得到我的意思。

在 CSS 中我们只能使用 block 注释 /**/,这是一个简单的错误。

关于html - 不应用 CSS 类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53857650/

相关文章:

html - 为什么我的导航栏扩展不正确?

javascript - 使用 vanilla JS/CSS 动画打开/关闭顶部导航栏

javascript - 如何在两个链接之间使用 toggleClass 方法

css - Zurb Foundation 中的动态列大小调整

angularjs - 从 Controller 中选择 Angular Bootstrap 静态选项卡

html - 垂直居中 jumbotron 内的所有内容

PHP - IF 语句普通用户或管理员有权访问

javascript - 垂直对齐和具有动态内容和高度的元素

javascript - 服务器端表单验证并返回消息

javascript - 使文本在 iframe 中不可选择