Переопределенные свойства CSS отменены или просто переопределены?

Question

Я имею в виду,

Если я сделаю:

#item { background:url('image.jpg');}

, а затем в другой таблице стилей я сделаю

#item {background:red;}

, браузер загрузит image.jpg иотменить это и установить красный, или будет идти прямо к красному?(без загрузки изображения)

спасибо!

Answer 1

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

В целом определения переопределяются, однако, в зависимости от того, что называется спецификой.Проверьте эту страницу для получения дополнительной информации об этом http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

Это будет делать оба, так как эти два утверждения совпадают с

#item { background: red url('image.jpg'); }

или

#item { background-color: red; }
#item { background-image: url('image.jpg'); }

В обоих случаях фон будет иметь изображение и всю областьэлемента элемента в красном.Таким образом, непрозрачное изображение, например .png с прозрачностью, будет, например, также заполняться красным цветом в прозрачных областях.

Однако, поскольку скрипт анализирует CSS каскадным образом,

#item { background: url('image.jpg'); }
#item { background: url('anotherimage.jpg'); }

он загрузит "anotherimage" и проигнорирует другой.Запрос не отправляется, пока CSS не завершит компиляцию и не определит порядок специфичность .Другими словами, первое изображение переопределяется и, следовательно, никогда не запрашивается.

На самом деле «background» - это сокращенное свойство, например «border», объединяющее все различные свойства в один оператор.Вот ссылка о свойстве background, прокрутите вниз, и вы сможете прочитать о нем.