Відповіді:
#- це селектор ідентифікаторів , який використовується для націлювання на один конкретний елемент з унікальним ідентифікатором, але. це селектор класів, який використовується для орієнтації на декілька елементів із певним класом. Іншим чином:
#foo {}буде стилізувати єдиний елемент оголошений з атрибутомid="foo".foo {}буде стилювати всі елементи з атрибутом class="foo"(у вас також може бути кілька класів, присвоєних елементу, просто розділіть їх пробілами, наприклад class="foo bar")Взагалі кажучи, ви використовуєте # для стилізації того, що ви знаєте, з’явиться лише один раз, наприклад, такі речі, як диски макета високого рівня, такі бічні панелі, зони банерів тощо.
Класи використовуються там, де стиль повторюється, наприклад, якщо ви очолюєте спеціальну форму заголовка для повідомлень про помилки, ви можете створити стиль, h1.error {}який застосовуватиметься лише до<h1 class="error">
Інший аспект, коли селектори відрізняються, полягає в їх специфіці - селектор ідентифікаторів вважається більш специфічним, ніж селекторний клас. Це означає, що там, де стилі конфліктують на елементі, стилі, визначені з більш конкретним селектором, перекриють менш конкретні селектори. Наприклад, з урахуванням <div id="sidebar" class="box">будь-яких правил для #sidebarперебору конфліктуючих правил для.box
Докладніші праймери для CSS-селекторів див. У Selectutorial - вони неймовірно потужні, і якщо ваше уявлення просто про те, що "# використовується для DIVs", ви б добре прочитали, як саме ефективно використовувати CSS.
EDIT: Схоже, що Selectutorial, можливо, зайшов на великий веб-сайт у небі, тому спробуйте скористатися цим посиланням на архів .
Це #означає, що він відповідає idелементу. .Чи означає ім'я класу:
<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>
#myRedText {
color: red;
}
.blueText {
color: blue;
}Зауважте, що в документі HTML атрибут id повинен бути унікальним , тому якщо у вас є більше одного елемента, який потребує певного стилю, слід використовувати ім’я класу.
Точка ( .) позначає ім'я класу, тоді як хеш ( #) позначає елемент із певним атрибутом id . Клас застосовуватиметься до будь-якого елемента, прикрашеного саме цим класом, в той час як стиль # застосовуватиметься лише до елемента з цим конкретним ідентифікатором.
Назва класу:
<style>
.class { ... }
</style>
<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>Названий елемент:
<style>
#name { ... }
</style>
<div id="name"></div>Варто також відзначити , що в каскаді , ідентифікатор ( #) селектор є більш конкретним , ніж AB ( .селектор). Тому правила в операторі id замінять правила в операторі класу.
Наприклад, якщо обидва наступні твердження:
.headline {
color:red;
font-size: 3em;
}
#specials {
color:blue;
font-style: italic;
}застосовуються до того ж елемента HTML:
<h1 id="specials" class="headline">Today's Specials</h1>колір: синій правило буде перевизначити колір: червоний правило.
Кілька швидких розширень щодо вже сказаного ...
idПовинен бути унікальним, але ви можете використовувати один і той же ідентифікатор , щоб зробити різні стилі конкретніші.
Наприклад, з цього HTML-витягу:
<div id="sidebar">
<h2>Heading</h2>
<ul class="menu">
...
</ul>
</div>
<div id="content">
<h2>Heading</h2>
...
</div>
<div id="footer">
<ul class="menu">
...
</ul>
</div>Ви можете застосувати різні стилі за допомогою цих:
#sidebar h2
{ ... }
#sidebar .menu
{ ... }
#content h2
{ ... }
#footer .menu
{ ... }Ще одна корисна річ, яку потрібно знати: ви можете мати кілька класів на елементі, розмежуючи їх пробілом ...
<ul class="main menu">...</ul>
<ul class="other menu">...</ul>Що дозволяє вам мати спільний стиль у .menuконкретних стилях за допомогою .main.menuта.sub.menu
.menu
{ ... }
.main.menu
{ ... }
.other.menu
{ ... }.class націлений на наступний елемент:
<div class="class"></div>#class націлений на наступний елемент:
<div id="class"></div>Зауважте, що ІД ОБОВ'ЯЗКОВО бути унікальним у всьому документі, хоча будь-яка кількість елементів може мати спільний клас.
Як і майже всі, хто вже заявив:
Період ( .) вказує на клас , а хеш ( #) - на ідентифікатор .
Принципова відмінність полягає в тому, що ви можете повторно використовувати клас на своїй сторінці знову і знову, тоді як ідентифікатор можна використовувати один раз. Це, звичайно, якщо ви дотримуєтесь стандартів WC3.
Сторінка все одно відображатиметься, якщо у вас є кілька елементів з однаковим ідентифікатором, але у вас виникнуть проблеми, якщо / коли ви намагатиметесь динамічно оновлювати вказані елементи, називаючи їх своїм ідентифікатором, оскільки вони не є унікальними.
Корисно також зазначити, що властивості ID замінять властивості класу.
# - це перемикач ідентифікаторів. Він відповідає лише елементам з відповідним ідентифікатором. Наступне правило стилю буде відповідати елементу, який має атрибут id зі значенням "green":
#green {color: green}Для отримання додаткової інформації див. Http://www.w3schools.com/css/css_syntax.asp
Ось мій погляд на пояснення правил .styleі #styleє частиною матриці. що якщо не в правильному порядку, вони можуть перекрити один одного або викликати конфлікти.
Ось лінійка.
Матриця
#style 0,0,1,0 id
.style 0,1,0,0 classякщо ви хочете змінити ці два, ви можете використовувати <style></style>відьом матричний рівень, або 1,0,0,0.
@ @ медіа-запит буде перекривати все вище ... Я не впевнений у цьому, але я думаю, що селектор ідентифікаторів #можна використовувати лише один раз на сторінці.