Question

我正在使用带有wordpress的Gantry框架。一切都很好。我想用Bootstrap创建一个模态窗口。我已经从here中包含了bootsrap cdn 出现的问题是它覆盖了我的网站的CSS，创建了较小的字体等等。我试图在本地包含它，但它再次是缩小版本，我无法找到所有的选择器。我怎么能指示wordpress在我的css之前加载这个css，所以最后加载了正确的css而没有被覆盖？

Answer 1

WordPress的wp_enqueue_style方法有一个依赖项参数，可让您指定添加的样式表所依赖的样式表。

https://developer.wordpress.org/reference/functions/wp_enqueue_style/

wp_enqueue_style( 'css_bootstrap', '/path-to-the-file/bootstrap.scss' );
wp_enqueue_style( 'css_gantry',    '/path-to-the-file/gantry.scss' );
wp_enqueue_style( 'css_main',      '/path-to-the-file/main.scss', array('css_bootstrap', 'css_gantry' );

第二行的最后一个参数指示css_main加载 AFTER css_bootstrap和css_gantry。

在此之后，请确保您注意CSS的级联规则。可能只是你的风格规则不像Gantry设定的那样具体。

例如：

.something .inner {
    color: blue;
}


.inner {
    color: red;
}

.inner的文字颜色为蓝色，因为第一条规则更具体（2个元素深，1个深）。

Answer 2

您可以使用CSS properties语句覆盖!important。 !important会覆盖任何正常的CSS分配给一个段落。例如：

＆＃13;

p.paragraph {
color: red;
}

p.paragraph {
color: blue !important;
}

＆＃13;

<p class="paragraph">
  Hello
</p>

＆＃13;

希望这有帮助！

Answer 3

我为解决这个问题所做的是，我使用!important来纠正在我的主题CSS之上加载bootstrap所影响的所有规则。我不得不纠正多个CSS规则，但最后一切看起来都很好。

Bootstrap css摧毁了我的CSS

3 个答案: