Что означает свойство, предшествующее звездочке, в CSS?

Я смотрел файл css сегодня и нашел следующий набор правил:

div.with-some-class {
    display:block;                   
    margin:0;
    padding:2px 0 0 0;
    *padding:1px 0 0 0;
    font-size:11px;   
    font-weight:normal;
    *line-height:13px;
    color:#3D9AD0;
}

Что означает звезда в * padding и * line-height?

Спасибо.

Ответ 1

Это "звездный хак" в тех же строках, что и "подлокотник". Он включает в себя мусор перед тем свойством, которое IE игнорирует (* работает до IE 7, _ до IE 6).

Ответ 2

В CSS? Ничего; это ошибка.

Из-за ошибок в некоторых версиях Internet Explorer они не будут правильно игнорировать недопустимое имя свойства, поэтому это один из способов предоставления CSS, специфичного для этих браузеров.

Использование условных комментариев более четкое и безопасное.

Ответ 3

Символ asteriks является допустимым шаблоном в CSS. Использование этого только означает, что следующие свойства CSS будут использоваться против всех узлов элемента в DOM. Пример:

*{color:#000;}

Вышеупомянутое свойство будет применено ко всем элементам DOM, тем самым побеждая естественное каскадирование в CSS. Его можно переопределить только специальными элементами DOM для таргетинга, где таргетинг начинается с уникальной ссылки идентификатора. Пример:

#uniqueValue div strong{color:#f00;}

Вышеупомянутое свойство переопределит подстановочный знак и сделает текст всех сильных элементов, которые встречаются в элементе div внутри элемента с значением атрибута id "uniqueValue".

Использование универсального шаблона, такого как первый пример, может быть быстрым и грязным методом для написания таблицы стилей reset. Это быстро и грязно, потому что гранулированное определение представления после шаблона, скорее всего, создаст чрезвычайно раздутую таблицу стилей. Если вы собираетесь использовать подстановочный знак, я бы предложил использовать его более конкретно, например:

* strong{color:#f00;}

В приведенном выше примере текст всех сильных элементов будет красным цветом, независимо от других свойств CSS, не указанных с уникальным идентификатором. Это считается гораздо более безопасным, чем использование "! Важного" объявления, поскольку известна эта декларация, которая вызывает вмешательство в естественную функциональность предполагаемого поведения и является кошмаром для поддержки.

Астерики в вашем примере находятся в неправильном месте, поскольку они, кажется, происходят внутри деклараций свойств, код, который входит в фигурные скобки, и это может вызвать ошибку.

Ответ 4

Это взломать IE7.

Если вы пишете это:

.test {
    z-index: 1;
    *z-index: 2;
}

для всего навигатора, которые уважают стандарт HTML <div class="test"></div> стандарта W3C <div class="test"></div>, имеют z-index: 1, но для IE7 этот элемент имеет z-index: 2.

Это не стандарт.

Для достижения этой же цели с помощью стандарта W3C выполните следующие действия:

  • Добавить некоторый условный комментарий в Internet Explorer (это простой комментарий к HTML для всех остальных навигаторов, так что это стандартный способ).

    <! - [if IE 7] > < html lang = "fr" class= "ie7" > <! [endif] →

    <! - [if gt IE 7] > <! → < html lang = "fr" > <! - <! [endif] →

И используйте предыдущие правила:

.test {
    z-index: 1;
}
.ie7 .test {
    z-index: 2;
}