CSS样式不适用
问题描述：
但是，如果我通过外部CSS文件中使用我的CSS的第一个元素不应用模板CSS样式。如果我插入直接进入HTML页面，它的工作像往常一样我使用Chrome测试，但也有即试图
我的HTML是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8"></meta>
<title>CVS upload page</title>
<link rel="stylesheet" type="text/css" href="static/css/app.css"/>
</head>
<body>
<div class="form-style-6">
<h1>Upload your cvs files</h1>
<form method="POST" enctype="multipart/form-data" action="/dcollect/upload" name ="uploadForm">
File one:
<input type="file" name="fileLastWeek"
accept=".csv, application/vnd.openxmlformats- officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/><br />
File two:
<input type="file" name="fileNew"
accept=".csv, application/vnd.openxmlformats- officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/><br />
<input type="submit" value="Upload"/>
</form>
</div>
</body>
</html>
我的CSS如下：。
<style type="text/css">
.form-style-6 {
font: 95% Arial, Helvetica, sans-serif;
max-width: 400px;
margin: 10px auto;
padding: 16px;
background: #F7F7F7;
}
.form-style-6 h1{
background: #43D1AF;
padding: 20px 0;
font-size: 140%;
font-weight: 300;
text-align: center;
color: #fff;
margin: -16px -16px 16px -16px;
}
.form-style-6 input[type="file"],
.form-style-6 input[type="text"],
.form-style-6 input[type="date"],
.form-style-6 input[type="datetime"],
.form-style-6 input[type="email"],
.form-style-6 input[type="number"],
.form-style-6 input[type="search"],
.form-style-6 input[type="time"],
.form-style-6 input[type="url"],
.form-style-6 textarea,
.form-style-6 select
{
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
background: #fff;
margin-bottom: 4%;
border: 1px solid #ccc;
padding: 3%;
color: #555;
font: 95% Arial, Helvetica, sans-serif;
}
.form-style-6 input[type="text"]:focus,
.form-style-6 input[type="date"]:focus,
.form-style-6 input[type="datetime"]:focus,
.form-style-6 input[type="email"]:focus,
.form-style-6 input[type="number"]:focus,
.form-style-6 input[type="search"]:focus,
.form-style-6 input[type="time"]:focus,
.form-style-6 input[type="url"]:focus,
.form-style-6 textarea:focus,
.form-style-6 select:focus
{
box-shadow: 0 0 5px #43D1AF;
padding: 3%;
border: 1px solid #43D1AF;
}
.form-style-6 input[type="submit"],
.form-style-6 input[type="button"]{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 3%;
background: #43D1AF;
border-bottom: 2px solid #30C29E;
border-top-style: none;
border-right-style: none;
border-left-style: none;
color: #fff;
}
.form-style-6 input[type="submit"]:hover,
.form-style-6 input[type="button"]:hover{
background: #2EBC99;
}
</style>
奇怪的是，如果我在它就像魅力的CSS的开头插入一个虚设的元素：
.dummy {
}
任何想法，为什么会发生？ 谢谢。
答
你的CSS文件应该包含CSS和只有 CSS。
<style type="text/css">是HTML，而不是CSS，不应该出现在CSS文件中。
CSS解析器试图将它当作一个选择器，触及语法错误，然后忽略（正确）无效的第一个规则集。
+0
是的，这可能是确切的案例... +1为了节省我的时间:) – Himanshu
答
如果您的CSS示例在.css文件中。你的第一个字母不需要（<style type="text/css">）。从你的css文件中删除这段代码。
答
看到这里的链接this is your code
你的代码是好的，但如果你想要写在外部CSS文件中的代码这一点，你只需要标记，你可以在标签像
<link rel="stylesheet" type="text/css" href="mystyle.css">
，如果你要链接到内部的css文件，你会写你CSS代码，你不需要写你的CSS代码
<style type="text/css">code...... </style>
<style type="text/css">css code....... </style>
我已经尝试了您提到的代码。但它对我的工作很好。我认为你的问题是错误的CSS路径。确保它是正确的。 –
@LibinCJacob OP在他的css文件中增加了