В чем разница между началом блока кода в CSS с помощью. [точка] и # [хэш]? - PullRequest
Новая
       33

В чем разница между началом блока кода в CSS с помощью. [точка] и # [хэш]?

10 голосов
/ 12 июля 2011

Пожалуйста, ответьте на следующие вопросы для двух примеров кода CSS, приведенных в конце.

  1. В чем разница между двумя кодами?Один начинается с точки, а другой с хэша.
  2. Как я могу назвать эти стили в HTML?Должен ли я использовать class="searchwrapper" или id="searchwrapper"?И почему, в чем разница?

Пример 1: Начиная с # [хэш] 

#searchwrapper {
    /*some text goes here*/
}

Пример 2: Начиная с. [Точка] 

.searchbox {
    /*some text goes here*/
}

Ответы [ 6 ]

20 голосов
/ 12 июля 2011

Разница:

. указывает класс

# указывает идентификатор

Пример класса: 

.myElement {...}

будет соответствовать 

<div class="myElement">

ID Пример: 

#myElement {...}

будет соответствовать 

<div id="myElement">

Класс или ID: Как выбрать

Только один элемент может иметь определенный идентификатор, но несколько элементов могут совместно использовать определенный класс.

  • Если вы нацеливаетесь на один конкретный элемент, присвойте этому элементу идентификатор и используйте # в своем CSS.
  • Если вы нацелены на несколько связанных элементов, присвойте им класс и используйте . в своем CSS.
5 голосов
/ 12 июля 2011

Это селекторы CSS:

  • #foo означает элемент с идентификатором foo
  • .foo означает все элементы с классом foo

См. http://www.w3.org/TR/CSS2/selector.html

Идентификаторы уникальны, поэтому вы можете иметь только один элемент с одинаковым идентификатором. Хотя класс может быть одинаковым для многих элементов (и каждый элемент может иметь несколько классов).

1 голос
/ 05 марта 2015

''является селектором класса, и он может применяться к нескольким элементам, которые имеют один и тот же класс

'#' является селектором идентификатора и применяется только к определенному одному элементу Id

1 голос
/ 12 июля 2011

Это селекторы CSS:

#foo означает элемент с идентификатором, установленным в foo, это относится к <div id="foo"> .foo означает элемент с классом foo, это относится к <div class="foo">

Плюс: у вас может быть несколько элементов с одинаковым class, но вы не можете иметь более одного элемента с одинаковым «d».(На самом деле вы можете, но это ПЛОХО, и W3C накажет вас).

1 голос
/ 12 июля 2011

«#» используется, если вы присвоили идентификатор элементу документа и «.»точка используется, если вы использовали класс с элементом документа.

Идентификатор для каждого элемента в документе уникален, поэтому если вы используете #, значит, вы хотите применить только к этому элементу.

Где, как будто вы используете "."точка, это означает, что вы хотите применить css к элементам, чей класс attirbute имеет то имя, которое находится после точки в css.как ".myClass", поэтому myClass - это имя класса.

Вы можете применить один и тот же CSS к нескольким идентификаторам: 

#id1,#id2{
//your css
}
1 голос
/ 12 июля 2011
  1. [точка] - селектор класса, см. Селекторы идентификаторов
  2. # - селектор идентификаторов, см. Селекторы классов
...