Переопределить файл таблицы стилей .css (не встроенный)
Можно ли как-то переопределить стандартную (в данном случае жидкую) таблицу стилей CSS, но без использования встроенных стилей? Также я хочу, чтобы этот стиль применялся только к этой конкретной странице, а не к другим.
Да, я могу использовать !important внутри тега <style> на этой конкретной странице, но мне нужно будет сбросить многие вещи. Это слишком много работы, и выглядит очень грязно.
Итак, есть ли способ сбросить ВСЕ элементы к значениям свойств по умолчанию и использовать свой собственный стиль только на этой одной странице?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
css означает каскадные таблицы стилей, поэтому после добавления стиля вы можете изменить или удалить его только с помощью другого стиля. ответить конкретно на ваш вопрос нет вы не можете. или, как указано в комментариях, просто удалите таблицу стилей с этой конкретной страницы.
Ну, вы не можете изменять свои файлы .css, но вы можете динамически заменять файлы с помощью js.
function replaceFile(newFile, fileLink) {
var oldcss = document.getElementsByTagName("link").item(fileLink);
var newcss = document.createElement("link");
newcss.setAttribute("rel", "stylesheet");
newcss.setAttribute("type", "text/css");
newcss.setAttribute("href", newFile);
document.getElementsByTagName("head").item(0).replaceChild(newcss, oldcss);
}
Другим решением было бы добавить нужные стили с помощью jQuery или js.
$('.demo').css({'background-color':'red','color':'white');
Ваше первое решение - это то, что я имел в виду, но я не знаком с тем, как жидкость компилирует файлы при рендеринге, и в этом конкретном случае я не уверен, что это сработает. Чтобы получить доступ к любой таблице стилей в жидкости, я делаю это в « index.liquid » <link type = "text/css" href = "{{ 'styles.css' | asset_url }}" rel = "stylesheet">. Итак, мне также нужно будет отобразить новую таблицу стилей, а затем заменить активную тему этой новой отображаемой ссылкой? Это правильно?
Вы можете выбрать все элементы внутри оболочки с помощью * и переопределить:
Пример:
.mylink{
color: red;
}
.mylink:hover{
color: black;
}
.reset *{
color: orange;
}
.reset *:hover{
color: silver;
}This is the link without reset:
<a href = "#" class = "mylink">Link</a>
<div class = "reset">
This is the link with reset:
<a href = "#" class = "mylink">Link</a>
</div>
Вы можете просто не использовать свой основной файл CSS на этой конкретной странице, если это возможно.