Уверен, что мне не хватает чего-то простого, но после того, как вы нашли какое-то время и не нашли ответа, вот мой вопрос:CSS: Переопределение важно с другим! Важно не работать?
Я разрабатываю компонент для Joomla !. Компонент сам по себе отлично работает по функциональности. Однако я замечаю, что некоторые стили не работают.
- У меня есть таблица, содержащаяся в div, каждая из которых имеет свои классы для стилизации.
- Styling работал отлично, пока я не протестировал несколько разных шаблонов, чтобы увидеть их влияние на мой стиль.
- Благодаря шаблон моделирования различных шаблонов, мои таблицы шире окно (шаблоны имеют
width:540px!important;в их CSS) - Моей попытки перекрывая это добавить
width:100%!important;в<style></style>тег в выходных данных компоненты - внутри тела документа. Это гарантирует, что мой CSS загружен последним, что должно переопределить CSS из шаблона. - Заказ загружаемого CSS выглядит следующим образом: В документе
<head></head>документа: CSS моего компонента, а затем шаблон CSS. Это приводит к тому, что мой CSS переопределяется шаблоном. Следовательно, мое решение добавить теги стиля внутри тегов тела над верхним тегом div моего компонента.
Результатом всего этого является то, что мой CSS действительно загружен последним, начиная с тегов стиля, которые находятся над верхним тегом div моего компонента. CSS из шаблона, тем не менее, все еще применяется к моей.
На мой взгляд, это не очень хорошая практика для использования! Важно для начала, и переопределить ее другим! Важно также не очень. Пожалуйста, исправьте меня, если я ошибаюсь, а также возможный ответ о том, как я могу переопределить CSS-шаблон и убедиться, что CSS моего компонента применяется - без изменения шаблона напрямую; компонент должен быть независимым от шаблона и всегда работать независимо от стиля шаблона.
Заранее спасибо.
/******* ****** EDIT/
Вот код в вопрос - в краткой форме (это было бы излишним включать bazillion строки кода из шаблона, но вы можете попросить больше, если необходимо):
<html lang="en-gb" slick-uniqueid="3">
<head>
<!-- Meta tags and other stuff -->
<!-- MY CSS -->
<link rel="stylesheet" href="/subdomainname/media/com_mycomponent/css/mystylesheet.css" type="text/css">
<!-- ANNOYING TEMPLATE CSS, SNIPPET TO FOLLOW -->
<link rel="stylesheet" href="http://mydomain.co.za/subdomainname/templates/annoyingtemplate/css/mobile.css" media="(max-width: 580px)">
</head>
<body>
<!-- template stuff as there would be in any other template, menus and modules etc -->
<style>
<!-- a bunch of my own CSS, none related at all to the tables in question
@media screen and (max-width:480px)
{
.sortSearchFilter table
{
width: 100%!important;
}
}
</style>
<div class="mycomponent">
<!-- component HTML -->
<div class="sortSearchFilter">
<table>
<!-- table contents -->
</table>
</div>
</div>
</body>
</html>
Я также попытался дать таблицу свой собственный класс и стиль, которые не идут особенно хорошо - был еще переопределены шаблоном :(Ниже приведен фрагмент из файла CSS шаблона, упомянутого выше:
#gkMainbody table {
width: 540px!important;
display: block!important;
padding: 30px 0 20px 0; /* padding for the scrollbars and the top message */
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
И вот два экрана надрезы от инспектора Chrome:
/********** ВТОРОЙ EDIT ******** ***/
Спасибо за отличный совет.В конце концов я использовал min-widthиmax-width в моем собственном CSS, чтобы применить высоту. Не самое лучшее решение, но оно, похоже, работает. Кроме того, я не заметил ранее, что в таблицах tbody также была использована ширина шаблона, которая также, казалось, возилась с моим стилем.
Добавление класса к моему столу все равно не помогло; хотя добавление идентификатора действительно работало (добавив CSS к этому идентификатору) - хотя мне все равно нужно применить !important к правилам, чтобы убедиться, что шаблон CSS переопределен.
«Это обеспечит загрузку моего CSS последним, что должно переопределить CSS из шаблона». Это не так, как работает CSS. http://www.w3.org/TR/CSS21/cascade.html#cascade – Quentin
'! important' никогда не следует использовать реактивно, только проактивно. Тег '! Important', который загружен последним, aka включен последним в ваш код, будет тем, что написано в стиле. – timo
@ user3008011 - Как указано в ссылке в моем предыдущем комментарии, это не обязательно так. – Quentin