2016-06-08 187 views
0

,所以我嘗試了一種形式(Style 6)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 { 
} 

任何想法,爲什麼會發生? 謝謝。

+0

我已經嘗試了您提到的代碼。但它對我的工作很好。我認爲你的問題是錯誤的CSS路徑。確保它是正確的。 –

+0

@LibinCJacob OP在他的css文件中增加了