Почему цвет фона на теле не работает?

При просмотре кода в моем браузере фон белый. Универсальный селектор * имеет lowest specificity, а селектор body поставляется после универсального селектора. Разве это не серый?Почему цвет фона на теле не работает?

* { 
    background-color: white; 
} 

body { 
    background-color: grey; 
}

источник

2016-01-09 jakewies

Это будет https://jsfiddle.net/13gjwLox/1/ вам просто нужно установить высоту –

Интересно. Но если мы исключим «*» из уравнения и просто получим «тело», страница будет серой с заданной или без «высоты». Я не совсем понимаю, почему это так. – jakewies

Я думаю, что когда вы не установите высоту, тогда html наследует цвет фона тела - https: // jsfiddle.net/gbzmauLa/как вы можете видеть в этом скрипте html переопределить цвет фона тела – Anonymous

Давайте разберем код в вопросе:

* { 
    background-color: white; 
} 

body { 
    background-color: grey; 
}

Это говорит:

Выберите каждый элемент и сделать его цвет фона белый ,
Выберите элемент body и сделайте цвет фона его серым.

Ну, если universal selector говорит выбрать все элементы, это будет включать в себя корневой элемент (html).

Таким образом, код вычисляет для:

html { 
    background-color: white; 
} 

body { 
    background-color: grey; 
}

Корневой элемент рисует холст белым, а body элемент не имеет высоту, так что полотно остается белым.

Добавить контент на свою страницу или указать высоту body, и вы увидите серый цвет.

высказанном в комментариях:

Интересно. Но если мы устраним * из уравнения и просто получим body, страница будет серой с указанием или без height. Я не совсем понимаю, почему это так.

Так что, если мы исключим универсальный селектор, что происходит с background-color корневого элемента?

Он сбрасывается в исходное значение: transparent (см: 3.2. the background-color property)

И когда background-colorhtml из элемента transparent, браузер использует background-color из body элемента рисовать холст.

3.11.2. The Canvas Background and the HTML <body> Element

Для документов, чьи корневой элемент представляет собой HTML-HTML элемент или XHTML html элемент: если вычисленное значение background-image на корневой элементе none и его background-color является transparent, пользовательских агентов должен вместо этого распространять вычисленные значения фоновых свойств из первого элемента HTML BODY или XHTML body дочернего элемента. Использованные значения этого свойства BODY являются его начальными значениями, а распространенные значения обрабатываются так, как если бы они были указаны в корневом элементе. Это рекомендуется, чтобы авторы HTML-документов указывали на холст фон для элемента BODY, а не на элемент HTML.

источник

2016-01-09 21:40:57

См. Также [Какая разница в применении CSS к html, телу и *?] (Http://stackoverflow.com/questions/7187569/whats- the-difference-in-apply-css-to-html-body-and) – BoltClock

Спасибо, я как-то работал вчера, но отличное объяснение! Итак, в основном, что я делал, я задал «белый цвет» белых для ВСЕХ элементов на странице и задал «background-color» серого для элемента body, но поскольку элемент 'body' имел только 'div' внутри него (который наследует« background-color »белого цвета от' * '), я видел только белый цвет. как только я удалил 'div' и добавил некоторый случайный текст и/или увеличил' height' 'body', я наконец увидел серый. правильно ли мое мышление? – jakewies

Привет, Джейк, быстро перевернуто: вы указали «белый цвет» белых для ВСЕХ элементов на странице и задали «background-color» серого для элемента body. * Но поскольку элемент 'body' не имеет высоты (по-видимому, он не имеет содержимого), серого фона нет. * Поэтому белый фон, используемый всеми другими элементами, включая' html' (который предшествует 'body' в коде), отображается на всей странице. –

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

* { background-color: white } 
 
body { background-color: grey }

<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

же фрагмент с <p> расположенным относительно выявить организма background-color:

* { background-color: white } 
 
body { background-color: grey } 
 
p { 
 
    position: relative; 
 
    top: 50px; 
 
}

<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

Кроме того, если ваше тело пусто, т выиграл» t имеют высоту, что делает ее сущностью невидимым.

источник

2016-01-09 20:06:25 SeinopSys

Ваш body элемент, вероятно, пуст (или содержит только другие элементы, но не прямой текст).

Добавить текст в body. Вы увидите, что его фон будет серым.

Ваш * {background-color: white;} содержит элемент html и любой другой элемент (кроме body) на белом фоне. Так что если ваш body содержит только элемент div, этот div будет иметь белый фон, и вы не увидите серый фон body, потому что div полностью заполняет его. Если вы дадите bodypadding, вы увидите цвет фона.

* { 
     background-color: white; 
    } 

    body { 
     background-color: grey; 
     padding:1%; 
    }

источник

2016-01-09 20:06:57 unor

* выбирает все элементы и этот код

* { 
    background-color: white; 
}

изменяет цвет фона каждого элемента на белый. Затем переопределить цвет фона тела серым, потому что элемент селектор «тело» является более конкретным, то *

body { 
    background-color: grey; 
}

вы не видите, потому что у вас нет никакого содержания в организме. Здесь вы можете увидеть css selectors и как Calculating a selector's specificity

источник

2016-01-09 20:30:15 Kos

Почему цвет фона на теле не работает?

ответ

Смежные вопросы