为什么CSS头样式不适用于引导HTML文件_Html_Css_Bootstrap 4

为什么CSS头样式不适用于引导HTML文件

html css bootstrap-4

为什么CSS头样式不适用于引导HTML文件,html,css,bootstrap-4,Html,Css,Bootstrap 4,我正在使用此引导html文件，如下所示：引导示例一些最爱搜索食谱：）使用此代码确保在头部区域中。这对我有用 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=

我正在使用此引导html文件，如下所示：


引导示例
一些最爱
搜索食谱

：）使用此代码

确保在头部区域中。这对我有用

<!DOCTYPE html>  
<html lang="en">  

<head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <style>
  .w3-button {
    color: blue;
  }
  </style>
</head>  

<body>  

<div class="w3-sidebar w3-bar-block" style="width:35%"> 
<h2 style="margin-left:15px;">Some Favorites</h2>
  <a href="#" class="w3-bar-item w3-button">Celery Root</a>
  <a href="#" class="w3-bar-item w3-button">Spaghetti Squash</a>
  <a href="#" class="w3-bar-item w3-button">Killer Mushroom</a>
   <input type="text" class="form-control" style="margin-left: 15px;">
<button type="button" class="btn btn-primary" style="margin-left:15px; width: 230px; height:50px; font-size: 20px;">Search Recipes</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</body>  
</html>


引导示例
.w3按钮{
颜色：蓝色；
}
一些最爱
搜索食谱

直接将您的样式应用于

标记，因为在引导模式中，样式直接影响标记，就像这样a{color:#337ab7；}


a.w3-button{
颜色：蓝色；
}

一些最爱
搜索食谱
之所以发生这种情况，是因为bootstrap使用自己的css覆盖了一些html标记，因此无法工作：


引导示例
a{
颜色：蓝色；
}
一些最爱
正如其他人之前提到的，Bootstrap正在向html元素添加自己的样式，如颜色、字体大小、边距等。
我建议，如果你想要自己的颜色，你可以在bootstrap站点自定义它们，或者你可以在单独的css文件或
标签中编写自己的样式
但它必须在插入bootstrap.css
文件之后进行
这是

如果你想深潜，为什么会发生这种情况，是一个很好的文件。
简而言之，想想看，每个选择器类型都有自己的计数器。计数器越高，你的风格就越强（越难改写）
就像你的例子一样。每种样式都有自己的3位数字
000

如果您仅对html
标记进行如下样式设置：
a {
    color: #00ff00;
}

计数器将为：001

但如果要添加类选择器：
.my-anchor {
    color: #0000ff;
}

它将是：010
哪个更强，你的锚颜色将是：#0000ff
如果将另一个类添加到锚点标记，则编号将为：020
，依此类推。如果添加一个id
，则该数字将为100
，比020强。
就像在内联样式的共享文档中一样
添加到元素的内联样式（例如style=“font-weight:bold”）始终覆盖外部样式表中的任何样式，因此可以认为具有最高的特殊性
我不建议使用！重要信息
b因为在这之后，您将困惑于如何覆盖它。如果它是最后一次解析，那么您可以使用它，但是如果您需要覆盖它，那么！重要信息
样式顺序将决定使用哪种样式
希望我没有把你弄糊涂，帮了你一点忙。
我最初在标题部分写的是：a{color:blue；}你能解释一下上面的陈述有什么错吗？因为引导样式
。如果您设置类的样式而不是，那么它会覆盖所有发生的矛盾。但是，当您使用标题部分中的类选择器指定CSS样式时，为什么引导不会覆盖它？引导外部链接覆盖了哪些CSS样式/属性？标记是由引导编写的，所以如果您想更改它们，请使用！重要规则或使用您自己的类/id覆盖它们。许多标记被引导覆盖，这篇文章可能会帮助您：谢谢。这很有帮助。我将阅读您发送给我的讨论每个css样式方法计数器的链接。再次询问，引导文件的外部链接的特殊性是什么？
.my-anchor {
    color: #0000ff;
}

a {
    color: #00ff00;
}

.my-anchor {
    color: #0000ff;
}