CSS: * html #id_name

Question

У меня есть этот код

*html #alertBox {
    height:100px;
}

#modalContainer > #alertBox {
    position:fixed;
}

это поддерживается css, я нашел этот код на другом сайте (я забыл ссылку)

Answer 1

*html #alertBox {
    height:100px;
}

Это неправильная звезда-HTML. Star-HTML - это CSS-хак, обычно используемый для нацеливания правил на IE6.

Префикс star-HTML в правиле не должен ничего совпадать, поскольку над корневым элементом (html) нет элемента (*). Но это происходит в IE до версии 6 из-за ошибок в этом браузере.

Однако для того, чтобы это правило было действительным, между * и html должен быть пробел. Текущий код недействителен CSS: валидатор будет жаловаться, и браузеры могут делать с ним неожиданные вещи. Как это бывает, в текущем наборе браузеров нет никакой разницы: IE6-7 допускает синтаксис без пробелов, другие игнорируют все правило. Но вы не должны на это полагаться.

#modalContainer > #alertBox {
    position:fixed;
}

Это дочерний селектор: он выбирает alertBox, когда он является прямым потомком modalContainer.

> - это то, что IE6 вообще не понимает, поэтому следствием является нацеливание правила на все браузеры, кроме IE6 (который не поддерживает position: fixed). Это делает его более или менее противоположным взлому HTML. Очевидно, что он используется здесь для этой цели, так как в противном случае селектор, включающий два уникальных идентификатора, является совершенно избыточным.

Answer 2

Это известно как star HTML hack и полезно для передачи определенных правил CSS в более старые версии Internet Explorer.

Таким образом, первый пример установит высоту #alertBox на 100 пикселей, только если используемый браузер восприимчив к взлому HTML в виде звезды:

Второй пример (#modalContainer > #alertBox) будет применен к любому элементу с идентификатором alertBox, который также является прямым потомком другого элемента, который имеет идентификатор modalContainer.

Разметка должна выглядеть примерно так:

<div id="modalContainer">
    <div id="alertBox"></div>
</div>

а не это:

<div id="modalContainer">
    <div>
        <div id="alertBox"></div>
    </div>
</div>

Оба эти правила действительны для CSS.