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

Question

我有一个用 PHP 编写的网页显示 table，我使用 nvd3 也显示基于 table 的图形，但是根据本教程：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
}

其中弄乱了我的 table，除了不包括此样式表，用我自己的本地 css 显式覆盖它，或者使图表显示在新网页中有什么我可以？如果这些是我唯一的选择，我该如何覆盖 *,*:before,*:after 部分？它使我的 headers 偏离中心

提前致谢

编辑：受

影响的代码

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

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

Answer 1

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

a.menu-link

例子

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

Answer 2

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

例如

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

Answer 3

你只需要在你的新 css3 文件中导入物化场，你怎么知道 css 在瀑布上工作，这意味着当你在 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
}

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

How to work with an external css stylesheet that is messing up my page?

php

html

css

nvd3.js