CSS樣式不適用

Question

所以我正在嘗試表單的模板css樣式（樣式6）

但是，如果我通過外部CSS文件使用CSS，則CSS的第一個元素將不適用。 如果我將其直接插入html頁面，它會照常工作。 我使用chrome進行測試，但也嘗試使用ie。

我的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 {
}

知道為什么會發生嗎？ 謝謝。

Answer 1

您的CSS文件應僅包含CSS。

<style type="text/css">是HTML，不是CSS，因此不應出現在CSS文件中。

CSS解析器試圖將其視為選擇器，遇到語法錯誤，然后（正確）忽略無效的第一個規則集。

Answer 2

如果您的CSS示例位於.css文件中。 不需要您的第一個字母（ <style type="text/css"> ）。 從您的css文件中刪除此代碼。

Answer 3

在這里查看鏈接，這是您的代碼

您的代碼還可以，但是如果您想在外部css文件中編寫代碼，則只需標記即可，您必須在標記中鏈接css文件，例如

<link rel="stylesheet" type="text/css" href="mystyle.css">

而且您不需要在其中編寫CSS代碼

<style type="text/css">code...... </style>

如果您想鏈接到內部CSS文件，您將在其中編寫CSS代碼

<style type="text/css">css code....... </style>

CSS樣式不適用

問題描述

3 個解決方案

解決方案1
3 已采納 2016-06-08 09:15:26

解決方案2
2 2016-06-08 09:18:20

解決方案3
1 2016-06-08 10:12:57

CSS樣式不適用

問題描述

3 個解決方案

解決方案1 3 已采納 2016-06-08 09:15:26

解決方案2 2 2016-06-08 09:18:20

解決方案3 1 2016-06-08 10:12:57

解決方案1
3 已采納 2016-06-08 09:15:26

解決方案2
2 2016-06-08 09:18:20

解決方案3
1 2016-06-08 10:12:57