Как выбрать *, но исключить ? Или установить стиль по умолчанию?

ProgramBox

Как выбрать *, но исключить ? Или установить стиль по умолчанию?

Post author:admin
Запись опубликована:18 апреля, 2023
Post category:Вопросы по программированию

#css #css-selectors #userstyles

#css #css-селекторы #пользовательские стили

Вопрос:

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

Я часто переопределяю эти стили по умолчанию, используя свои собственные стили, например:

 * {padding:0; margin:0; }

Тем не менее, я хотел бы соблюдать таблицу стилей по умолчанию для определенных атрибутов элемента, например, отступы и поля <body> по умолчанию. Я пытался:

 *    { padding:0;       margin:0;       }
body { padding:default; margin:default; }

Но это не работает. Ни то, ни другое не работает initial .

Есть ли способ решить эту проблему, выбрав все элементы, но исключив <body> ?

1. Это немного глупо.. во-первых, это хорошая идея обнулить margin вкл html, body . Вместо этого вы должны добавить margin в свой контейнер div или что-то еще. Если вы действительно хотите это сделать, то настройте сброс CSS.

2. Возможно, еще проще, придерживаясь того, что у вас есть: *{padding:0;margin:0;} body{margin:10px} — таким образом, вам не придется использовать неэффективный * (по крайней мере, не снова ), и body поле определенно согласовано между браузерами.

3. @thirtydot но не согласуется между пользовательскими таблицами стилей, которые я имел в виду, когда сказал «по умолчанию»

4. @Pent: Почти никто из пользователей не заботится о точных body полях. Те, кому не все равно , будут использовать !important , чтобы убедиться, что их пользовательские margin настройки сохраняются, если для них это так важно (им придется, потому что любой другой веб-сайт в мире устанавливает body { margin: 0 } или любое другое число). Смотрите спецификацию CSS: w3.org/TR/CSS21/cascade.html#important-rules . Почему вы так заботитесь о сохранении полей по умолчанию ?

5. @thirtydot я просто ищу решение, позволяющее это сделать.

Ответ №1:

Есть ли способ решить эту проблему, выбрав все элементы, но исключив <body> ?

Поскольку все, что отображается во вьюпорте, по умолчанию состоит из <html> , <body> и <body> содержимого html , вы можете просто выбрать body и всех его потомков:

 html, body * { margin: 0; padding: 0; }

default не работает, потому что такого ключевого слова нет. initial не работает, потому что начальные поля равны 0. Невозможно вернуть свойству значение по умолчанию, заданное браузером, после того, как вы изменили его с помощью CSS.

1. Вы можете отобразить title с head, title { display: block; } помощью 🙂

2. @Pent Прочитал это здесь несколько лет назад.

3. @Boltclock я бы даже не допустил штрафа в 0,1 секунды, но я действительно не понимаю, почему это будет медленно, поскольку сначала читается css, затем html, в то время, когда * читается, разве это не правда, что элементов не так много, даже если вся страница предположительно заполнена элементами?

4. @Pent: Это медленно, потому что браузеру нужно вычислять стили для каждого элемента на странице.

5. @Boltclock разве это не так, что сначала он вычисляется в </style> конечном теге и кэшируется в computed styles , и используется для каждого элемента, с которым он встречается позже?

Ответ №2:

 html, head, head *, body * { }

Ответ №3:

<html> и все потомки <body> :

 html, body * {padding:0;margin:0;}

1. черт возьми, у них действительно должен быть xpath-подобный способ указания исключений

2. На самом деле, это так. Вы можете использовать :not(body) в качестве селектора, но старые браузеры не поддерживают многие селекторы CSS3.

Ответ №4:

Используйте body * селектор.

 body *{padding:0;margin:0;}

Ответ №5:

Сначала установите для них значение 0, а затем переопределите требуемые значения впоследствии. Вам было бы лучше использовать сброс CSS, но если вы действительно хотите использовать звездочку, этот метод сработает.

    * {
     padding:0;
     margin:0;
   }

   body, html {
     padding: 10px;
   }

http://meyerweb.com/eric/tools/css/reset/

1. я имею в виду, я знал, что могу сделать это таким образом, конечно, но, как вы видите, это не гарантирует 10 пикселей. он определяется пользователем, так как же мне узнать, какое пользовательское заполнение / поле для body?

2. Вы имеете в виду таблицы стилей, специфичные для браузера? Зачем вам сохранять их по умолчанию в браузерах? Установите что-нибудь, чтобы страница выглядела одинаково для каждого браузера. 🙂 Если вы действительно хотите изучить значения по умолчанию, вы могли бы использовать инструменты проверки и проверить вычисленные стили ваших тегов body html, прежде чем применять какой-либо специальный стиль.

3. да, определенно, я указал «по умолчанию» в вопросе