E # myid vs. #myid Селекторы CSS

Question

Мне интересно, в чем разница между ч / б E # myid и #myid (E - любой элемент), учитывая, что на странице может быть только один элемент с #myid?

Answer 1

Это должно быть ошибкой / ошибкой, что #myid не влияет на элемент input. У меня отлично работает.

---

Как вы изменили свой вопрос:

Изображение у вас есть два разных документа, которые используют одну и ту же таблицу стилей. В одном документе элемент DIV имеет идентификатор «foo», а в другом документе элемент SPAN имеет такой же идентификатор. Затем вы можете использовать следующую таблицу стилей для стилизации обоих элементов:

#foo {
    color: #FFF;
}
div#foo {
    background-color: #F00;
}
span#foo {
    background-color: #0F0;
}

Тогда оба элемента будут иметь один и тот же цвет шрифта, но разный цвет фона.

Answer 2

Они имеют разную специфичность.

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 3

Два селектора имеют различную специфичность. Правила, заданные в более конкретном селекторе, будут заменять правила, заданные в менее конкретном.

Правила специфичности действительно просты. При возникновении конфликта (два или более правил, задающих разные значения для одного и того же элемента), к следующим правилам обращаются в порядке :

1) В каком «пространстве» живет правило? Правило в верхнем «пробеле» автоматически побеждает против правил в нижних пробелах: a) Устанавливается таблицей стилей пользователя с помощью б) Устанавливается авторской таблицей стилей, с! важным c) Устанавливается в таблице стилей браузера с помощью г) Установить в стиле style = "" правило e) Устанавливается таблицей стилей пользователя без! е) Устанавливается авторской таблицей стилей без! важной g) Устанавливается в таблице стилей браузера без! важных

2) Сколько #ids в селекторе? Селекторы с большим количеством #id автоматически выигрывают у селекторов с меньшим количеством (при условии, что они связаны в правиле № 1).

3) Сколько .classes или: псевдоклассов в селекторе? Селекторы с большим количеством классов автоматически выигрывают у селекторов с меньшим количеством (при условии, что они связаны с предыдущими правилами).

4) Сколько простых элементов в селекторе? Опять же, чем больше, тем лучше.

5) Наконец, как далеко в документе находится правило? Более поздние правила переопределяют более ранние правила, если они связаны со всеми предыдущими категориями. Это применимо внутри документа (внизу вашего CSS-файла и вверху) и между документами (любые правила во втором ed css-файле «позже», чем правила в вашем первом ed css-файле) .

Понимание специфики может помочь вам написать более простой CSS. Я почти всегда запускаю свои селекторы с ближайшим из возможных #id, потому что он одновременно ограничивает распространение селектора именно теми элементами, которые мне нужны, и автоматически переопределяют любые «глобальные» правила CSS, которые у меня могут быть установить в документе.

Answer 4

Наряду с другими замечаниями, ID не обязательно должен быть уникальным на странице ...

Можно применить один идентификатор к любому из N различных элементов (например,

Answer 5

Разница в том, что на разных страницах вы можете использовать разные элементы, используя этот идентификатор. Почему вы это делаете, я не знаю, но может потребоваться для (просто примера) элемента div на некоторых страницах, принимающего те же атрибуты, что и span на других страницах.

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