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

Question

I have a webpage written in PHP that displays a table, and I use nvd3 to also show a graph based on the table, however according to this tutorial: http://lsxliron.github.io/nvd3Tutorial/ I should use several css stylesheets, inlcuding

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

in my head for the page. I also use my own external stylesheet. However the linked one has the code

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
}

in it which messes up my table, short of either not including this stylesheet, explicitly overriding it with my own local css, or making the graph show in a new webpage is there anything I can do? And if those are my only options, how could I override the *,*:before,*:after section? It is making my headers off center

Thanks in advance

Edit: The code being affected by

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

is a div inside of a td used to space out my headings and subheadings, I added box-sizing: initial to the div, and it works fine now (everything was shifted to the left before). The box-sizing inherit was shrinking the content and increasing the margin.

Answer 1

materialize is not required for NVD3. I would ignore that part of the tutorial unless you want to use Material Design. If you do want to use materialize, then just make your selectors more specific.

eg

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

Answer 2

1. put your CSS after all others
2. add !important to every rule you want to override
3. check with inspector in your favorite browser which rules you have to override additionally and do it also with !important
4. remember that the more specific your rule is the higher its priority: ul li a.menu-link will override a.menu-link for all anchors in ul>li

Example

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

Answer 3

You only need to import the materialize fiel in your new css3 file, how you know css work over waterfall, that mean that whe your use import in css on the top of the page, that style will charge in the same css, and beacuse css work over waterfall all the last style overwrite the first style (As long as styles repeat themselves). Go:

@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
}