Что означает * HTML Body в таблице стилей CSS? - PullRequest
2 голосов
/ 18 декабря 2008

В таблице стилей у меня есть:

    * HTML BODY
    {
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 25px;
        padding-top: 190px;
    }
    * HTML #maincontent
    {
        width: 100%;
        height: 100%;
    }

я знаю, что а. означает класс, а символ # применяется к идентификатору, но что означает * HTML?

Ответы [ 5 ]

11 голосов
/ 18 декабря 2008

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

P * { }

Соответствует любому элементу, который является потомком тега P

* HTML

ничего не должно значить, потому что HTML не может быть дочерним для чего-либо (по определению). Он используется потому, что IE (редактировать, по крайней мере, IE 5-6 - спасибо RoBorg!) Игнорирует * и поэтому может использоваться для определения специфических стилей IE:

HTML {
 // Normal styles
}

* HTML {
 // IE Specific styles
 }

См. http://www.peachpit.com/articles/article.aspx?p=358552

4 голосов
/ 18 декабря 2008

* означает любой элемент
HTML и BODY означают элементы <html> и <body>.

Следовательно, * HTML BODY означает элемент body внутри элемента HTML, внутри любого элемента.

Это на самом деле взлом браузера : некоторые браузеры будут соответствовать этому, а некоторые - нет (Internet Explorer соответствует, Firefox - нет, не уверен в других).

1 голос
/ 18 декабря 2008

Одна из причин, по которой люди добавляют селекторы типа *, html или body (или, в данном случае, все 3) в правило таблицы стилей, заключается в увеличении вычисления специфичности селектора. Конечно, html никогда не будет потомком чего-либо еще, поэтому * html - это специфический взлом IE, но есть причина, по которой люди добавляют html или body в объявление:

Например:

html p { font-color: red }
p { font-color: blue }  

Абзацы внутри тегов html (как, впрочем, и все они) более конкретны, чем просто абзацы, поэтому цвет шрифта будет красным, независимо от порядка этих объявлений в таблицах стилей. Если бы существовало третье правило с html body p, оно бы имело приоритет.

Это немного меньше, чем использовать! Важный, но лучше по возможности отключить больше семантических тегов.

0 голосов
/ 18 декабря 2008

Ну, это действительно плохое утверждение селектора CSS, вот что. Позвольте мне разобрать это для вас:

[all elements] (sub-selection) [HTML] [BODY]

То есть он проходит через все элементы, чтобы найти элемент HTML, а затем BODY внутри. Проблема в том, что элемент тела будет 1 всегда, и #maincontent должен быть либо BODY, либо находиться внутри него. Период.

Как сказал Джоэл, это может напоминать дизайнеру, но я не уверен в этом. Для меня этот код является определенным «запахом кода»!

Вы должны переписать ваши CSS-селекторы так:

body {

И

#maincontent {

соответственно.

0 голосов
/ 18 декабря 2008

Для 2-го фрагмента, поскольку * соответствует чему-либо, элемент элемента является избыточным. Похоже, что он там, чтобы напомнить автору о намерении стилей - что если он что-то меняет во втором фрагменте, убедитесь, что он проверяет элемент #maincontent, чтобы убедиться, что он выглядит правильно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...