Question

我创建了自己的自定义导航栏。我保存在一个名为main-menu.php的文件中我使用：

将其称为标题

<?php
include "main-menu.php";
?>

主菜单如下：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<nav>
    nav contents...
</nav>
<script>
    jQuery Contents
</script>
<style>
    CSS Styling
</style>

我遇到的问题是虽然这是一个单独的文件，但是调用标题...我添加的CSS和页面顶部调用的脚本/链接影响了所有页面上的布局/显示标题下方的内容。

例如，我正在设计一个电子商务商店，并且描述已经改变了它的布局，因为主菜单.php它已经塞满了，应该是粗体的文本不再是粗体，

有什么方法可以阻止main-menu.php中的css影响页面的其余部分吗？

Answer 1

您的问题源于对CSS和PHP如何包含工作缺乏理解或误解。

我遇到的问题是虽然这是一个单独的问题文件，调用标题......

但是，当您导入它时，它不再是一个单独的文件。源可能是一个单独的文件，但include函数会将导入的代码拉入，并且解释器（PHP和浏览器）有效地将它们视为单个文件。由于最终的HTML / CSS / JS代码输出到单个文件中，因此它遵循所有单个文件规则。

我添加的CSS和页面顶部调用的脚本/链接会影响布局/显示在标题下方的所有内容页面上。

是的，这就是当你向页面添加CSS时会发生什么。这是 Cascading 样式表（CSS）的级联部分。

解决这个问题的理想方法是更好地了解级联的工作原理，但就目前而言，我们只会以一种更简单的方式解决问题，您可以在学习时从那里开始。

你的风格中有这样的东西很好：

a {
  font-weight: bold;
}

这会使你的所有链接都变得粗体。所有。的。他们。这是因为浏览器仅匹配a标记。

因此，要使所有<nav>链接变为粗体，您可以这样做：

nav a {
  font-weight: bold;
}

如果您的网页上有多个<nav>元素，则可以向其添加类和/或标识符，以便区分它们。推荐的方法是使用CSS类，但是在谨慎使用时，我会发现ID特别有用。

所以，你可能会做这样的事情（ID）：

#header-nav a {
  font-weight: bold;
}

或者这个（类）：

nav.header a {
  font-weight: bold;
}

所有这些操作都告诉浏览器只对<nav>元素内的链接进行样式设置（或者更具体地说，将nav元素归类为header或元素“头 - NAV”）。

我不想要的Bootstrap样式怎么样？

这就是Bootstrap的阶级快乐自然对你有利的地方。只是不要使用Bootstrap的类，你不会得到它的大部分样式。

从那里，你只是清除了仍然适用于你的元素的样式，并覆盖它们。这些库可能有些毛茸茸，但这就是野兽的本性。

所以，如果你有一个类似于Bootstrap的风格：

.nav.header a {
   font-weight: bold;
}

您只需匹配the specificity，或在必要时获得更具体的信息：

.nav.header a {
  font-weight: normal;
}
/* Or... */
.my-nav.nav.header a {
   font-weight: normal;
}

您可以通过打开浏览器的开发人员工具并检查受影响的项目来了解Bootstrap正在使用的选择器。如果您不确定，可以使用开发人员工具打开和关闭应用的样式，或者添加自己的样式。然后，一旦找到选择，就可以在样式表中匹配它们以覆盖Bootstrap并将其重新设置为原始值。

那么Vue是如何做到的？

作为一个奖励，我正在添加它。您可能会看到或已经看到诸如Vue或React之类的库允许创建组件。这些是完全封装的UI项目，它们维护自己的HTML，CSS和JS，并且不会相互干扰。这可能就是你如何想出你想要的方式。

但是，这些库所做的是，在编译时它们“命名”所有内容，类似于我上面解释的内容。您的<foo>组件变为<div class="foo">，a { font-weight: bold; }变为foo a { font-weight: bold; }。类似的技术，只是自动化。

Answer 2

有几种方法可以做到这一点。

1。使用不同的选择器

如果你的<div>都受到引导程序的影响而你不想要它，那么只需分配一个没有被引导程序使用的id或类，那么这就不会与bootstrap的样式冲突。 / p>

某些div中bootstrap使用的公共类名是alert类。因此，如果你有一个带有alert类的div，但是你希望它看起来与bootstrap的样式不同，那么考虑给它另一个类名，例如alert-custom，以便将两种样式应用于你的元素（取决于元素应用于哪个类）

2。覆盖样式

您可以通过将所需的CSS声明作为该特定元素的最底层声明来覆盖您已为特定元素加载的任何样式。

如果你的bootstrap <div>中的<link />元素有一些CSS规则，但是你在其他地方的<style>元素中声明了一些其他规则（任何地方都可以，因为它是你想要覆盖的那个特定元素或标签的样式，那么该声明将取代引导样式。

3。在线样式

这将覆盖为特定元素声明的任何先前样式。您可以阅读更多相关信息here

我希望这有帮助！

Answer 3

您可以将!important属性添加到要修改的项目，此属性将覆盖当前属性。例如：

<div class="your-class">Text modiefed</div>

<!-- new css -->
<style>
.your-class{
    font-weight: bold!important;
}
</style>

保持CSS完全分离

3 个答案:

1。使用不同的选择器

2。覆盖样式

3。在线样式