Что означает свойство со звездочкой в ​​CSS?

85

Сегодня я просматривал файл 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;
}

Что означает звездочка в * отступах и * высоте строки?

Спасибо.

css Маджид Фуладпур
источник

Ответы:

98

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

опелло
источник
7
Благодарность! И я поискал «взлом звездного свойства» и нашел этот ясный и исчерпывающий пост Эда Элиота: «Совет CSS: таргетинг на IE 5.x, 6 и 7 отдельно» на ejeliot.com/blog/63
Маджид Фуладпур,
1
вместо использования css-хаков вы также можете попробовать условные комментарии, например, проверить форму quirksmode.org/css/condcom.html для получения дополнительной информации.
Capi Etheriel
Следует отметить, что Safari (7.0.1) и предшествующие ему версии (невозможно проверить) будут выдавать предупреждения консоли, если вы используете взлом свойства звезды.
Джим
RIP IE7 и подобные «исправления».
ChristoKiwi
примечание: «Поскольку условные комментарии используют структуру комментариев HTML, они могут быть включены только в файлы HTML, но не в файлы CSS» quirksmode.org/css/condcom.html
Джордж Бирбилис
32

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

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

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

Квентин
источник
2
На самом деле. Следует избегать взломов CSS, которые не являются правильным CSS; никогда не знаешь, что с ними может сделать будущий браузер.
bobince 03
@bobince Я понимаю, что вы сделали этот комментарий еще в прошлом, но теперь мы можем быть абсолютно уверены, как каждый будущий браузер будет интерпретировать это, поскольку алгоритм синтаксического анализа CSS очень строг и говорит браузеру молча игнорировать такие правила.
mgol 03
1
@m_gol - Нет, не можем. Мы не знаем, что будущая спецификация CSS скажет о значении *перед свойством. Если он получит значение, современные браузеры проигнорируют его, позволяя безопасно добавить расширение. В этом суть правила «игнорировать».
Квентин
8

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

*{color:#000;}

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

#uniqueValue div strong{color:#f00;}

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

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

* strong{color:#f00;}

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

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


источник
4
Отвечает на то, что я искал в Google, даже если это не правильный ответ
Стив
4

Это хак для IE7.

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

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

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

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

Чтобы добиться того же со стандартом W3C, выполните следующие действия:

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

    <! - [если 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;
}
Бруно Лезье
источник