Question

编辑：三天前我的网站很完美，我没有更新任何css或HTML。

几天前，我注意到我的网站风格没有按原样显示。它几乎就像浏览器覆盖我的样式表并在Times New Roman中显示内联所有内容一样。（我在Chrome和IE中查看了我的网站）

当我尝试在样式表中设置特定html元素的样式时，浏览器不会读取它。但是当我在html中对它进行样式设置时。

您可能会说html文档没有正确读取css文件，但有趣的是，某些元素正在被读取，如标题，导航栏和页脚。

HTML页面

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" type="text/css" href="new-site.css" media="screen"/> 
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300|Open+Sans:400,700|Roboto:400,300' rel='stylesheet' type='text/css'>

</head>
<body>
<div id="wrap">
    <?php include('includes/googleAnalytics.php'); ?>
    <?php include('includes/nav.php'); ?>
        <div id="content-custom">
            <div id="main-custom">
                <div id="main-intro-custom">
                <br>
                <br>
                <span>Contact Us</span>
                <p>Questions or comments? Send us a message. We would love to hear from you.</p>
                </div><!--end mainintrocustom-->
            </div><!--end main-custom-->
            <div id="contact">
                    <div id="checkfaq">
                    <a href="faq.php">Check our FAQ to see if your question has been answered.</a>
                    </div><!--end checkfaq-->
                    <form name="contact" method="post">
                    <br>
                    <input type="text" name="name" placeholder="name" required/>
                    <br><br>
                    <input type="text" name="email" placeholder="email" required/>
                    <br><br>
                    <textarea name="message" placeholder="message" required></textarea>
                    <br><br>
                    <input type="submit" name="send" value="Send" />
                    </form> 

</div><!--end contact-->    
        </div><!--end content-->
    <?php include('includes/footer.php'); ?>
</div><!-end wrap-->
</body>
</html>

以此页面为例，唯一没有样式的元素是<div id="contact">中的元素。

如果我写

#contact{
background:orange;
}

在外部样式表中，浏览器无法显示它。

但是当我添加这个：

<div id="contact" style="background:orange;">

浏览器显示它。

最奇怪的部分是我从未改变过CSS中的单一内容。我联系了hostgator，看看是不是他们的结果，他们告诉我这不是服务器错误。

我该如何解决这个烂摊子？有没有其他人遇到过这个问题。

编辑：这是指向我的样式表的链接： CSS HERE

编辑：我认为问题在于我没有关闭.imgThumb:hover。为什么在我测试时浏览器需要花费几天的时间来搞砸布局？如果这些类.imgThumb未包含在这些页面中，为什么其他页面会受到此错误的影响？

Answer 1

我怀疑你的任何一个插件（可能是wordpress）都会使用！重要的是要避免重写样式。

您可以通过使用FireBug或开发工具检查元素来检查这一点。如果那样的情况下没有其他选择只是为了它

#contact{
background:orange !important;
}

Answer 2

您正在与CSS进行样式优先级冲突。从我可以收集到的内容，因为您可以成功应用内联样式而不是样式表，您可能有另一种样式覆盖样式表中的样式。您可以通过在Chrome中打开开发人员工具，检查元素以及查看计算样式来进行检查。如果你扩展你感兴趣的样式，你应该看到哪些样式被覆盖，因为它们被划掉了。

我不推荐这个，因为它可能会失控，但是在紧要关头你可以强制你的风格被应用（假设另一个样式表没有做同样的事情），你可以添加一个{{1标记给他们。

!important

如果你想避免这种情况，你可以使用一个更具体的选择器，它在CSS中提高了样式的优先级。如果你可以让这个工作，我强烈建议使用这种方法，因为它会导致很多更少的头痛与风格的变化：

#contact {
    background:orange !important;
}

你越具体，越好。如果您知道元素的直接父级，我建议您使用选择器.parentContainer #contact { background: orange !important; }，它比前一个更明确，它将只检测任何后代，而不仅仅是直接子节点。

HTML文件仅读取元素中的样式属性

2 个答案: