Question

<head>

    <title>Water Bureau</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/css/main.css" type="text/css" media="screen" title="Main CSS">
    <link rel="stylesheet" href="custom.css" type="text/css" media="screen" title="Custom Styles">
    <script language="JavaScript" src="/shared/js/createWin.js" type="text/javascript"></script> 

</head>

这是代码，但“custom.css”无效。它根本不起作用。如果我们将@import添加到main.css中，或者添加到标题中，而不是它可以正常工作。有任何想法吗？我们也摆脱了媒体=“屏幕”。

它内部的CSS工作正常，就在我们堆叠这两个时，解析的第一个是浏览器读取的唯一一个。因此，如果我们交换主要低于定制，定制比工作但没有主要工作。和custom只有CSS的片段，并没有覆盖main中的所有CSS，只有1个元素。

我无法理解！我们还有其他的样式表（我们为了解决这个问题而拿出来）并且它们工作得很好......

Answer 1

我认为可能存在两个问题：

custom.css的href当前指向HTML文件当前目录中的某个位置。如果custom.css位于/ css目录中，如main.css，则必须添加它。使用@import标记时会包含该文件，因为@import与main.css相关，并且可以在与main.css相同的目录中找到custom.css
有一个未公开的CSS标签或某些东西会破坏它之后的所有CSS;这不太可能，但您可以使用W3.org CSS validator验证您的CSS。

Answer 2

就像hsource说的那样，尝试验证两个css文件。

http://jigsaw.w3.org/css-validator/

同样只是尝试这个，没有同名文件夹中的两个css文件的标题，相对于导入它们的页面：

<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/custom.css" media="screen" />

也可能是因为您没有使用任何文档类型，而且您没有关闭链接标记，与此相关的内容可能是您的问题。所以试试这个：

<!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" dir="ltr" lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/custom.css" media="screen" />
</head>

Answer 3

这可能是由于CSS处理style precedence的方式，但也可能是由不良标记引起的。尝试验证您的文档或使用custom.css样式表的绝对路径。

Answer 4

GaVra，你对doctype等是正确的。我们应该知道，鉴于HTML5 doctype正在被使用，可能还没有准备好采取行动。

谢谢！

两个链接的CSS文件不起作用

4 个答案: