html - 没有新的 css 加载

Question

我有一个问题，没有新的 CSS 可以工作。这是codePen:https://codepen.io/meamonb/pen/PmqKvB我要添加的新类是 .email-sign-in-field。它不适用于任何新类或 ID。我尝试修改 HTML 或检查类名是否有拼写错误，但没有任何效果。我正在使用 firebase serve 对其进行测试，因此这可能是问题的一部分。目前还没有JS代码。我也在使用 HTML5 样板文件。这是 CSS:

@import URL('https://fonts.googleapis.com/css?
family=Montserrat:300,500');

#header {
color: white !important;
font-family: 'Montserrat', sans-serif;
font-weight: 500 !important;
}

body {
background-color: #33658A;
}

#body {
font-family: 'Montserrat', sans-serif;
font-weight: 300 !important;
}


/* this is a tweak of bootstrap's .panel because creating my own 
results in a cluster */

.panel-notikal {
margin-bottom: 20px;
background-color: #fff;
border: 0 !important;
border-radius: 12px !important;
-webkit-box-shadow: 0px 20px 72px -13px rgba(0,0,0,0.75) !important;
-moz-box-shadow: 0px 20px 72px -13px rgba(0,0,0,0.75) !important;
box-shadow: 0px 20px 72px -13px rgba(0,0,0,0.75) !important;
border-color: #ddd;
}



/* SIGN IN PANEL */
#sign-in-column {
margin-top: 25px;
}

#sign-in-body {
text-align: center;
}

#google-sign-in-button {
color: white;
background-color: #d34836;
padding-top: 4px;
padding-bottom: 4px;
border-radius: 20px;
-webkit-transition: color 0.4s, background-color 0.4s;
-moz-transition: color 0.4s, background-color 0.4s;
-ms-transition: color 0.4s, background-color 0.4s;
-o-transition: color 0.4s, background-color 0.4s;
transition: color 0.4s, background-color 0.4s;
cursor: pointer;
}

#google-sign-in-button:hover {
color: #d34836;
background-color: white;
}

#google-sign-in-button-icon {
padding-right: 8px;
}

#twitter-sign-in-button {
color: white;
background-color: #0084b4;
padding-top: 4px;
padding-bottom: 4px;
border-radius: 20px;
-webkit-transition: color 0.4s, background-color 0.4s;
-moz-transition: color 0.4s, background-color 0.4s;
-ms-transition: color 0.4s, background-color 0.4s;
-o-transition: color 0.4s, background-color 0.4s;
transition: color 0.4s, background-color 0.4s;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
}

#twitter-sign-in-button:hover {
color: #0084b4;
background-color: white;
}

#twitter-sign-in-button-icon {
padding-right: 8px;
}

.email-sign-in-field {
margin-top: 10px;
}

Answer 1

这有两个可能的原因:

1. 您确定这不是浏览器缓存 CSS 的问题吗？尝试使用 Cntr+Shift+R 刷新页面，这会很难重新加载页面
2. 问题还可能在于您定义 CSS 属性的顺序重叠。由于更高的偏好，先前定义的相同属性可以被覆盖。您可以使用 !important 来强制使用首选项。尽管我认为这不太可能，因为您的代码笔表明这是一个新属性