如何从Bootstrap与Materialize样式表选择特定CSS选择器并解决冲突

当同时引入两个CSS框架出现样式冲突时，你可以试试这几个方案来精准控制想要保留的样式：

• 调整样式表加载顺序
  CSS的规则是后加载的样式会覆盖先加载的同名选择器样式。如果你想保留Bootstrap的navbar样式，就把Bootstrap的样式表放在Materialize之后引入。比如：

  <!-- 先加载Materialize -->
  <link rel="stylesheet" href="materialize.css">
  <!-- 后加载Bootstrap，让它的navbar样式覆盖Materialize的 -->
  <link rel="stylesheet" href="bootstrap.css">
  

  这个方法简单直接，但要注意会不会影响其他你想保留的Materialize样式，可能需要后续微调。

• 用CSS优先级精准覆盖
  给你要保留的Bootstrap navbar加一个自定义类，通过更具体的选择器提升优先级，从而覆盖Materialize的样式。比如：

  <nav class="navbar bs-navbar">...</nav>
  

  然后写自定义CSS：

  /* 这个选择器比单纯的.navbar优先级更高 */
  .navbar.bs-navbar {
    /* 可以直接把Bootstrap navbar的关键属性写在这里，或者重置Materialize的冲突属性 */
    background-color: #fff; /* 比如Bootstrap默认的白色背景 */
    box-shadow: none; /* 如果Materialize加了不必要的阴影，就重置掉 */
  }
  

  这种方法不会影响其他元素的样式，针对性很强。

• 手动重置冲突样式
  直接找到Materialize中.navbar的冲突属性，用CSS把它们重置为Bootstrap的默认值或者unset。比如：

  /* 重置Materialize给navbar加的冲突属性 */
  .navbar {
    /* 取消Materialize的背景色 */
    background-color: unset;
    /* 取消Materialize的阴影 */
    box-shadow: unset;
    /* 重置其他冲突属性，比如padding、margin等，参考Bootstrap的navbar默认样式 */
    padding: 0.5rem 1rem;
  }
  

  这个方法需要你先对比两个框架的navbar样式，找出冲突的具体属性，适合冲突点不多的情况。

• 给其中一个框架加命名空间隔离
  如果你只需要在页面部分区域用Materialize的样式，可以给它的所有样式套一个命名空间。比如用Sass/Less预处理的话，引入Materialize时嵌套在自定义类里：

  .materialize-container {
    @import 'materialize';
  }
  

  然后只有需要Materialize样式的元素放在这个容器里：

  <!-- 这个区域用Materialize样式 -->
  <div class="materialize-container">...</div>
  <!-- navbar不在这个容器里，只会应用Bootstrap的样式 -->
  <nav class="navbar">...</nav>
  

  这个方法能从根源上隔离两个框架的样式，但需要你会用CSS预处理工具，或者手动修改Materialize的样式表包裹命名空间。

内容的提问来源于stack exchange，提问作者ritesh rc