如何使用弄乱我的页面的外部 CSS 样式表？答案

【问题标题】：How to work with an external css stylesheet that is messing up my page?如何使用弄乱我的页面的外部 CSS 样式表？
【发布时间】：2017-07-31 21:50:44
【问题描述】：

我有一个用 PHP 编写的显示表格的网页，我使用 nvd3 来显示基于表格的图形，但是根据本教程：http://lsxliron.github.io/nvd3Tutorial/ 我应该使用几个 css 样式表，包括

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" />

在我的脑海中寻找页面。我也使用自己的外部样式表。但是链接的有代码

td,th {
  padding: 15px 5px;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  border-radius: 2px
}

td,th {
  padding: 0
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

table {
  width: 100%;
  display: table
}

,th,td {
  border: none
}

*,*:before,*:after {
  box-sizing: inherit
}

其中弄乱了我的表格，要么不包括此样式表，要么用我自己的本地 css 显式覆盖它，或者使图形显示在新网页中，我能做些什么吗？如果这些是我唯一的选择，我怎么能覆盖*,*:before,*:after 部分？它使我的标题偏离中心

提前致谢

编辑：受

影响的代码

*,*:before,*:after {
  box-sizing: inherit
}

是 td 内的一个 div，用于分隔我的标题和副标题，我在 div 中添加了box-sizing: initial，现在它工作正常（之前所有的东西都向左移动了）。 box-sizing inherit 正在缩小内容并增加边距。

【问题讨论】：

也发布 html 代码。
探索使用内部和内联样式来特别限定外部样式。
@UncaughtTypeError 我有点希望我不必这样做（因为我很懒）
好吧，你已经有一个带有你自己的自定义规则的外部样式表，所以在那里声明你的样式覆盖并将<link>标签放在该文件的<link>标签下面到外部物化cdn样式表.您的自定义样式仍应超过具体化规则，因为它们现在将在“级联顺序”中降低

标签： php html css nvd3.js

【解决方案1】：

NVD3 不需要实现。除非您想使用 Material Design，否则我会忽略本教程的那一部分。如果您确实想使用具体化，那么只需使您的选择器更具体。

例如

.my-table-wrapper td, .my-table-wrapper th {
  padding: 15px 5px;
  /* etc. */
}

【讨论】：

非常感谢，我会把它从我的页面中删除

【解决方案2】：

将您的 CSS 放在所有其他人之后
将!important 添加到您要覆盖的每条规则中
在您喜欢的浏览器中检查检查器，您必须另外覆盖哪些规则，并使用!important 执行此操作
请记住，您的规则越具体，其优先级就越高：ul li a.menu-link 将覆盖 a.menu-link 用于 ul>li 中的所有锚点

例子

td,th {
  padding: 15px 5px !important;
  display: table-cell !important;
  text-align: left !important;
  vertical-align: middle !important;
  border-radius: 2px !important;
}

【讨论】：

我可以这样做，我只是希望不必这样做，哦，好吧。关于强制box-sizing: inherit 不起作用的任何想法？
继承自什么？如果你强制它继承 - 它会继承任何设置 = 什么都不会改变。因此，您还需要在父级别强制使用相同的属性
为什么要使用重要！ ?只需使选择器更具体。重要的！是 CSS 反模式。

【解决方案3】：

您只需要在新的 css3 文件中导入 materialize 字段，您如何知道 css 在瀑布上工作，这意味着当您在页面顶部使用 import in css 时，该样式将在同一个 css 中收费，并且因为 css 在瀑布上工作，所有最后一个样式都会覆盖第一个样式（只要样式重复自己）。去：

@import url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css");

td,th {
 padding: 15px 5px;
 display: table-cell;
 text-align: left;
 vertical-align: middle;
 border-radius: 2px
 padding: 0
 border: none;
}

table {
 border-collapse: collapse;
 border-spacing: 0
 width: 100%;
}

*,*:before,*:after {
  box-sizing: inherit
}

【讨论】：