CSS样式不适用
[英]CSS style doesn't apply
问题描述
So i was trying a template css style for a form ( Style 6) 
所以我正在尝试表单的模板css样式（ 样式6）
But the first element of my CSS doesn't apply if i use it through external css file. 但是，如果我通过外部CSS文件使用CSS，则CSS的第一个元素将不适用。 If i insert it directly into html page, it does work as usual. 如果我将其直接插入html页面，它会照常工作。 I use chrome for testing but also have tried with ie. 我使用chrome进行测试，但也尝试使用ie。
My html is 我的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>
And my CSS is as follows: 我的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>
The strange thing is that if i insert a dummy element at the beginning of the css it works like charm: 奇怪的是，如果我在css的开头插入一个虚拟元素，它的工作原理就像是魅力：
.dummy {
}
Any idea why it happens? 知道为什么会发生吗？ Thanks. 谢谢。
3 个解决方案
解决方案1
3 已采纳 2016-06-08 09:15:26
Your CSS file should contain CSS and only CSS. 您的CSS文件应仅包含CSS。
<style type="text/css"> is HTML, not CSS and should not appear in the CSS file. <style type="text/css">是HTML，不是CSS，因此不应出现在CSS文件中。
The CSS parser is trying to treat it as a selector, hitting a syntax error and then ignoring (correctly) the invalid, first rule-set. CSS解析器试图将其视为选择器，遇到语法错误，然后（正确）忽略无效的第一个规则集。
解决方案2
2 2016-06-08 09:18:20
If your CSS example is in .css file. 如果您的CSS示例位于.css文件中。 Your first letter is not need ( <style type="text/css"> ). 不需要您的第一个字母（ <style type="text/css"> ）。 Remove this code from your css file. 从您的css文件中删除此代码。
解决方案3
1 2016-06-08 10:12:57
See the link here this is your code 在这里查看链接， 这是您的代码
your code is ok but if you want to write your code in external css file this you only need to tag you have to link your css file in tag like 您的代码还可以，但是如果您想在外部css文件中编写代码，则只需标记即可，您必须在标记中链接css文件，例如
<link rel="stylesheet" type="text/css" href="mystyle.css">
and you don't need to write your css code in 而且您不需要在其中编写CSS代码
<style type="text/css">code...... </style>
if you want to link to internal css file you will write you css code in 如果您想链接到内部CSS文件，您将在其中编写CSS代码
<style type="text/css">css code....... </style>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.