Question

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

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

例如，如果我的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＃授权和h3＃未授权元素都不会。这适用于我选择的任何元素。

我似乎无法在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()') +

的main.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

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

CSS未应用于Pug条件元素

编辑：

编辑＃2：

1 个答案: