Как отменить css стиль: Удалить встроенные свойства CSS из элемента с помощью JavaScript/jQuery

html — Как удалить css

Вопрос задан 5 лет 1 месяц назад

Изменён 5 лет 1 месяц назад

Просмотрен 334 раза

Как удалить css у одного объекта, если выставлены глобальные настройки в .css

    img {}

Мне нужно вставить изображение у которого не будет вообще никаких стилей.

• html
• css

4

all — Универсальное свойство, которое сбрасывает все значения свойств в исходные или наследуемые, за исключением свойств direction и unicode-bidi.

Значения

• initial Изменить все свойства, применяемые к элементу, на исходные значения.
• inherit Изменить все свойства, применяемые к элементу, на значения, наследуемые у родителя.
• unset Если свойство наследуется, то его значение принимается как inherit, в противном случае оно принимается как initial.

Можно прописать так.

<img>

Дай этому img какой-нибудь id в html коде. Потом обратись к этому id в css и пропиши all: unset;

Если правильно понял, то:

• img имеет определенные свойства по умолчанию;
• img у определенного блока не должен наследовать свойства по умолчанию.

Можно сделать так:

img { //какие-либо свойства занаддные глобально
    padding: 15px;
    margin: 15px;
}
.block img { //сброс унаследованных глобальных свойств
    padding: 0;
    margin: 0;
}

1

Зарегистрируйтесь или войдите

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Современный сброс стилей CSS.

В этой статье вы узнаете о том, как сбрасывать CSS в наши дни.

Перевод статьи A Modern CSS Reset

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

Если честно, то кажется я слишком много и через чур увлеченно забиваю голову всякой нудной чепухой из CSS. Одним из таких моментов является сброс CSS, это возможно тот момент, который забрал у меня слишком много времени за последние годы.

В эпоху современной веб разработки, нам не так то и нужен загруженный сброс стилей или вообще совсем не нужен, поскольку проблемы совместимости CSS в браузерах сейчас встречаются куда реже, чем это было в дни старого доброго IE6. Это был момент времени, когда появились такие реализации сброса стилей в CSS, как normalize.css и спасли нас от ада с бесконечной вознёй при правке стилей. Но эти дни уже прошли и сейчас мы вполне можем доверять браузерам в этом плане, так что подобные подходы к сбросу стилей, в большинстве своём, уже довольно излишне.

Мне до сих пор нравится делать сброс, так что я долго и усердно, годами ковырялся, как одержимый в Code golf (прим. это когда побеждает самый короткий и действенный подход в программировании ) стиле на этом направлении. Я всё объясню, что в этом коде где и как, но сначала посмотрите на него целиком:

/* Указываем box sizing */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Убираем внутренние отступы */
ul[class],
ol[class] {
padding: 0;
}
/* Убираем внешние отступы */
body,
h2,
h3,
h4,
h5,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
/* Выставляем основные настройки по-умолчанию для body */
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] {
list-style: none;
}
/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Упрощаем работу с изображениями */
img {
max-width: 100%;
display: block;
}
/* Указываем понятную периодичность в потоке данных у article*/
article > * + * {
margin-top: 1em;
}
/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select {
font: inherit;
}
/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0. 01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

Начинаем мы с box-sizing. Тут я простым и элегантным движением сразу же сбрасываю все элементы и псевдоэлементы на box-sizing: border-box.

*,
*::before,
*::after {
box-sizing: border-box;
}

Кто-то считает, что псевдоэлементы должны наследовать параметры блочной модели, но я считаю это глупым. Если вы хотите использовать другое значение для box-sizing, то просто укажите его — ну это то, как я делаю, в любом случае. Я написал про box-sizing больше в CSS From Scratch.

/* Убираем внутренние отступы */
ul[class],
ol[class] {
padding: 0;
}
/* Убираем внешние отступы */
body,
h2,
h3,
h4,
h5,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}

После box-sizing, я сбрасываю margin и padding, даже там, где они выставлены дефолтными настройками браузеров. Тут и так всё понятно, так что я не буду уделять этому моменту много внимания.

Но хотя, я упомяну ситуацию со списками. Тут я выбрал только те списки, у которых есть атрибут class, так как если я буду использовать чистый <ul> или <ol>, то я хочу, чтобы он выглядел реально как список. Тут главное не переусердствовать, охватив всё, как в предыдущем моменте, что удалит все отступы.

body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}

Идем дальше: стили для body. Тут у меня всё просто. Очень полезно указать для body занять весь viewport, даже когда он пуст, делаю я это, выставляя min-height на 100vh. Ещё мне нравится плавный скролл к анкорам, так что тут я выставлю scroll-behavior: smooth.

Ещё, я выставил только два текстовых стиля. line-height на 1. 5, потому что по-дефолту стоит 1.2, чего откровенно недостаточно в плане доступности и читабельности текста. Так же я выставил text-rendering на optimizeSpeed. Используя optimizeLegibility вы делаете ваш текст приятнее на вид, но можете столкнуться с серьёзными проблемами производительности, такими как задержки в 30 секунд при загрузке, так что я его стараюсь избегать. Хотя, я иногда добавляю его для секций с микротекстом.

ul[class],
ol[class] {
list-style: none;
}

Как и с отступами, я сбрасываю стилизацию списков только у элементов, у которых указан class.

a:not([class]) {
text-decoration-skip-ink: auto;
}

Для ссылок без указания класса, я выставлю text-decoration-skip-ink: auto, так что подчеркивание будет рендериться куда читабельнее. Вообще, это можно было бы выставить всем ссылкам, но у меня возникло несколько конфликтов, так что я оставил так, как написано выше.

img {
max-width: 100%;
display: block;
}

Дальше идут старые добрые резиновые изображения. Я решил сделать все изображения блочными элементами, потому что, откровенно говоря, жизнь слишком коротка, чтобы мириться с этим мелким, стрёмным отступом снизу и вообще, в реальности, изображения — особенно те, с которыми я работаю — обычно подразумевают под собой блочное поведение.

article > * + * {
margin-top: 1em;
}

Мне очень нравится этот трюк в CSS и я наконец-то осмелился добавить его в сброс. Так называемый “lobotomized owl selector” выбирает прямых потомков article и добавляет им сверху внешний отступ в 1em. Это указывает понятную периодичность в потоке контента у article. Вообще, на самом деле, я использую удобную штуку с .flow, сейчас уже почти в каждом проекте. Вы можете больше прочитать про это на 24 Ways. Да и вообще, мне так кажется, что это сейчас мой самый используемый CSS.

input,
button,
textarea,
select {
font: inherit;
}

Ещё одна вещь, которую я наконец то решился выставить по дефолту это font: inherit для инпутов, которые, проще говоря, делают то, что и должны делать. Хватит уже этого мелкого (mono, в некоторых случаях) текста!

@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

Последнее, но уж точно не менее важное, это один @media запрос, который сбрасывает анимации, переходы и поведенческие настройки для скролла, но только в тех случаях, когда пользователь предпочитает как можно меньше всяких движений на странице. Мне нравится такая штука в сбросе стилей, с побеждающим специфичность селекторов !important, потому что в современных реалиях, если пользователь не хочет видеть лишних переходов и т.п., то он и не должен их видеть, вне зависимости от CSS при сбросе стилей.

Вот и всё, вот он маленький и сброс для стилей, который делает жизнь куда проще. Если он вам приходится по вкусу, то смело можете его брать на вооружение! Берите его на GitHub или в NPM.

селекторов css — CSS удаляет все общие стили из элементов

спросил 3 года, 2 месяца назад

Изменено 3 года, 2 месяца назад

Просмотрено 987 раз

Есть ли простой способ удалить любой стиль из моих элементов, который применяется к «универсальным» селекторам?

Под общим я подразумеваю раздел или p или div или кнопка … в основном там, где он не нацелен на элемент на основе класса или идентификатора, а на основе самого фактического элемента.

Проблема в том, что у меня есть некоторые HTML и CSS, которые я вывожу на веб-сайте пользователя, но я не могу контролировать их таблицу стилей, загружаемую на той же странице.

 #my-main-wrapper > section, p, div, button {
    все: снято;
}
 

 #my-main-wrapper section,p,div,button{
маржа: 0;
заполнение: 0;
граница:0;
}
 

 #my-main-wrapper > * {
  все: снято;
}
 

 a {
  цвет синий;
  текстовое оформление: нет; /* без подчеркивания */
}
 

 body {
  цвет синий;
}
а {
  цвет: наследовать; /* синий цвет и для ссылок */
  оформление текста: наследовать; /* без подчеркивания */
}
 

 а {
    все: снято;
}
 

 a, button /* &c.  .. */ {
    все: снято;
}
 

 a { color:red; }
а: наведите { цвет: синий; }
.nav {цвет: зеленый; }
 

 .nav a { цвет:зеленый !важно; } /* Я плохой человек и не должен использовать !important */