CSS 未应用于 Pug 条件元素

Question

我目前正在使用 Pug、node.js 和 express 编写 Web 应用程序。

我在将 CSS 样式应用于 Pug 条件中的代码元素时遇到了一些问题。

例如，如果我的哈巴狗有：

div(id='outside')
  if authorised
    h3(id='unauthorised') Sorry, you are unauthorised
  else
    h3(id='authorised') Welcome!

我的 CSS 是：

#outside {
  width: 100px;
  height: 10px;
  background-color: red;
}

#unauthorised {
  color: red;
}

#authorised {
  color: green;
}

div#outside 会拾取 CSS，但 h3#authorised 和 h3#unauthorised 元素都不会。这适用于我选择的任何元素。

我似乎在 Pug Github 页面上找不到这样的问题，在尝试研究时也找不到太多帮助，所以我假设我做错了什么。

有什么想法吗？

---

编辑：

为了澄清，我实际使用的代码是：

header.pug

doctype html
html
  head
    title= title
    script(src='js/action-button.js')
    script(src='js/form.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js')
    style
      include ../../public/css/main.css

  body
    div#test

    if isAdmin
      div(id='action-items' onmouseover='expandHoverAsAdmin()' onmouseout='closeHoverAsAdmin()')
        button(type='button' class='admin-button action' onclick='openForm();') Add role
        button(type='button' class='admin-button action' onclick='openForm();') Add user
        button(type='button' id='action-button' class='action' onclick='openForm();') +
    else
      button(type='button' id='action-button' class='' onclick='openForm();' onmouseover='expandHover()' onmouseout='closeHover()') +

ma​​in.css

div#test {
  width: 100px;
  height: 20px;
  background-color: red;
}

div#action-items {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  bottom: 20px;
  right: 20px;
  z-index: 1;
  position: fixed;
}

.action {
  border-width: 0;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 20px;
  right: 20px;
  z-index: 1;
  width: 115px;
  height: 55px;
  border-radius: 30px; /* make circular maybe? */
  background-color: rgba(255,0,0,0.5);
  color: white;
  box-shadow: rgba(2,2,2,0.5) 2px 2px 2px 0px;
}

button:focus {
  outline: none;
}

button:hover {
  cursor: pointer;
}

---

编辑#2：

我可以看到现在的问题不是 CSS 没有应用于条件元素，而是我的 CSS 文件没有保存我的一些更改。

我刚刚在之前的工作中再次测试了上述内容。当我在本地打开我的 main.css 文件时，我看到：

#one-element {
  /* some styling */
}

#outside {
  width: 100px;
  height: 10px;
  background-color: red;
}

#unauthorised {
  color: red;
}

#authorised {
  color: green;
}

#some-other-element {
  /* some styling */
}

但是通过 Chrome 中的开发工具查看这个 CSS，我看到了：

#one-element {
  /* some styling */
}

#some-other-element {
  /* some styling */
}

我正在使用 Atom 来编辑我的文件。而且我肯定会保存我的 CSS，所以这不应该是问题。

Answer 1

解决了。我一直在更新我的哈巴狗没有指向的不同位置的同名文件。