Question

我正在学习CSS和HTML，我在本地创建了一个模板，第一次我有一个单独的本地CSS文件，在这个文件中，主体不会被设置样式但是div是，第二次我试图包含HTML主体中的CSS，而不是单独的CSS文件，一切正常。

第一次，div被设计了样式但是身体没有。当创建一个单独的CSS文件时：

<!DOCTYPE html>
<html>
<head>
    <title>Quote Machine</title>
    <script src="scripting.js"></script> 
    <link href="style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script   src="https://code.jquery.com/jquery-2.2.3.js"   integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="   crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div>hello</div>
<style>
</style>
</body>
</html>

<!-- separate CSS file-->
    body {
        background-color:black;
    }   


div {
    background-color:yellow;
}

第二次，当CSS在HTML文件中时，所有内容都按照要求设置样式：

<!DOCTYPE html>
<html>
<head>
    <title>Quote Machine</title>        
    <script src="scripting.js"></script> 
    <link href="style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script   src="https://code.jquery.com/jquery-2.2.3.js"   integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="   crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>

<body>
<div>hello</div>

<style>

body {
    background-color:black;
}   

div {
    background-color:yellow;
}

</style>

</body>
</html>

Answer 1

您需要在引导程序之后包含样式表，以覆盖默认的引导样式。

在您的第一个示例中发生的是它正在加载样式表，然后加载引导程序样式表。

在第二个示例中，它会加载样式表，然后是引导样式表，然后使用您在html中声明的样式覆盖引导样式表。

Answer 2

除了M P的答案，在你的第二个例子中，使用元素作为标签的子标签是不正确的html。它们属于该部分。

Answer 3

您的 style.css在您的引导程序文件之前是comimg。 这需要反过来。你的风格在内部工作的原因是因为dom是最后编译的，并且会覆盖任何不包含！important的外部样式。

示例

第4个优先级

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

第三优先

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

第二优先级

<head> <style></style> </head>

第一优先级

<div style="color:red;"></div>

所有工作都按此顺序进行。

希望这有帮助

有一个单独的CSS文件对运行的代码有影响吗？

3 个答案: