Как работать с внешней таблицей стилей CSS, которая портит мою страницу?
У меня есть веб-страница, написанная на 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
}
это div внутри td, используемый для разметки моих заголовков и подзаголовков, я добавил box-sizing: initial в div, и теперь он работает нормально (раньше все было смещено влево). box-sizing inherit сокращал содержание и увеличивал маржу.
Решение
материализация не требуется для NVD3. Я бы проигнорировал эту часть руководства, если вы не хотите использовать Material Design. Если вы хотите использовать материализацию, просто сделайте ваши селекторы более конкретными.
например
.my-table-wrapper td, .my-table-wrapper th {
padding: 15px 5px;
/* etc. */
}
Другие решения
- ставь свой 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;
}
Вам нужно только импортировать поле материализации в ваш новый файл 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
}