Question

我的css存在问题，无法理解出现了什么问题。

在我的PC上的开发设计中，测试页面CSS是正确的，但是一旦我上传到服务器，CSS就会改变。

基本上我所拥有的是一个表单，其中输入框无效，它显示一个红色阴影，如果有效，它显示为绿色，但这不显示在网络上的表单上仅显示本地主机。

input:focus:invalid {
    outline: none;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    border: 0px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.75);
    display: block;
    font-size: 14px;
    margin: 1px 0 12px 0;
    padding: 6px;
    height: 30px;
    width: 100%;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
}
input[type="text"].oversize,
input[type="password"].oversize,
input[type="date"].oversize,
input[type="datetime"].oversize,
input[type="email"].oversize,
input[type="number"].oversize,
input[type="search"].oversize,
input[type="tel"].oversize,
input[type="time"].oversize,
input[type="url"].oversize,
textarea.oversize {
    font-size: 17px;
    padding: 4px 6px;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
textarea:focus {
    background: #fafafa;
    outline: none !important;
    border-color: #b3b3b3;
}
input[type="text"][disabled],
input[type="password"][disabled],
input[type="date"][disabled],
input[type="datetime"][disabled],
input[type="email"][disabled],
input[type="number"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="time"][disabled],
input[type="url"][disabled],
textarea[disabled] {
    background-color: #ddd
}
input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="date"]:invalid,
input[type="datetime"]:invalid,
input[type="email"]:invalid,
input[type="number"]:invalid,
input[type="search"]:invalid,
input[type="tel"]:invalid,
input[type="time"]:invalid,
input[type="url"]:invalid,
textarea:invalid {
    box-shadow: 0 0 1px 1px red;
}
input[type="text"]:valid,
input[type="password"]:valid,
input[type="date"]:valid,
input[type="datetime"]:valid,
input[type="email"]:valid,
input[type="number"]:valid,
input[type="search"]:valid,
input[type="tel"]:valid,
input[type="time"]:valid,
input[type="url"]:valid,
textarea:valid {
    box-shadow: 0 0 1px 1px green;
}
textarea {
    height: auto
}
select {
    width: 100%
}

Answer 1

如果您的css在本地工作，那么它也应该在服务器上工作，

我认为您正在查看旧版本的CSS

删除您的浏览器历史记录并清除缓存的内容按Ctrl + F5强制重新加载页面

确保使用inspect元素

正确链接ur css文件

如果确实检查了来自inspect元素的ur css文件，那么你的更新是否有

Chrome风格的CSS样式呈现与本地主机不同，在线

1 个答案: