CSS разные значения отступов для каскадных стилей

Question

Если я сделаю это:

*{padding:0}
div#myDiv{padding:10px;}

Будет ли это вести себя как любой обычный стиль в CSS с последним примененным стилем, перекрывающим другие?т.е. элемент с идентификатором myDiv будет иметь отступ в 10 пикселей?Или я должен указать! Важный?

Будет ли это работать во всех популярных браузерах?

Спасибо!

Answer 1

Селектор all (*) не поддерживается в устаревших браузерах.Я считаю, что он поддерживается во всех современных браузерах.

Что касается вашего конкретного заполнения для #myDiv, это должно сработать.Каскадирование в CSS означает, что элементы наследуют свойства от родителей, но их можно переопределить с помощью более специфичных селекторов, нацеленных на дочерние элементы.

Если вы хотите сбросить или нормализовать весь кроссбраузерный CSS, попробуйте Eric Meyers reset css sheet .Я использую этот файл как начало во всех моих шаблонах CSS.Это отличная помощь.Также обязательно определите строгий XHTML как тип документа, это сэкономит вам много неудобств.

Answer 2

Если объявлено как

div {padding: 30px;}
div#pro { padding: 0px; }

Каждый div будет иметь 30px отступов, кроме div # pro, независимо от порядка таблицы стилей, это зависит от того, насколько вы специфичны для ваших объявлений.Более общие спецификации заменяются более конкретными.

Answer 3

Да: элемент <div id="myDiv"> будет иметь заполнение 10px, и это работает практически во всех браузерах. Каскадирование означает, что более конкретные селекторы будут переопределять более общие селекторы.

Единственный раз, когда вам действительно нужно использовать !important, это когда у вас есть более общий стиль, который вы хотите иметь приоритет над более конкретным стилем, или когда у вас есть два разных стиля для одного и того же селектора, например воспользоваться преимуществами в старых браузерах, которые не поддерживают !important.

Answer 4

я бы не рекомендовал это делать. если вы хотите установить отступы для всех элементов по умолчанию на ноль, я бы рекомендовал использовать css reset page

но да, это сработает.