CSS引导改写我自己的CSS代码

Question

目前，我想一个网站，在这个w3school教程这里显示的幻灯片编号：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto

所示的例子中都有自己的一套CSS中，使过渡和幻灯片顺利淡入淡出的效果。添加CSS引导后，幻灯片的效果变得粗糙，转换不再流畅。使用

CSS：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

我在我的CSS文件，像这样的链接是：依次

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

从前面的例子中我搜索

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css"> 

，许多人说，把在自己的css文件之前引导，这样我自己的代码就不会被覆盖。但我已经尝试过，但在这种情况下不起作用。任何人都可以就此提出建议吗？谢谢。

Answer 1

尝试将!important添加到您不希望受到影响的CSS规则中。

尝试使用浏览器的检查工具，看看有什么CSS规则适用于每个元素

有关详情，请浏览： https://stackoverflow.com/questions/9245353...

Answer 2

需要命名空间在幻灯片中使用的类名，以便它不受引导样式的影响。在类名覆盖的情况下很难处理引导程序的特殊性。

我的建议是使用类似w3_slideshow_的东西，并在其中加上所有类名的前缀。 class="text"将变成class="w3_slideshow_text"等，然后相应地更新样式和js。

如果还存在一些问题，请检查检查员的特异性并使用!important（不是最干净的方法）或通过应用更具体的选择器来覆盖由引导程序应用的样式。

Answer 3

由于Giann达尔提到的，你可以尝试添加!important

我觉得你的CSS属性可以通过CSS从引导被覆盖，因为它是更具体的。 例如：

body > p {} 

比

p {} 

为此更具体的，body > p {}应用