W CSS jaka jest różnica między „.” i „#” przy deklarowaniu zestawu stylów?

219

Jaka jest różnica między #i .podczas deklarowania zestaw stylów dla elementu i jakie są semantyka które wchodzą w grę przy podejmowaniu decyzji, który z nich korzystać?

Sam152
źródło

Odpowiedzi:

336

Tak, są różne ...

#jest selektorem identyfikatora , używanym do kierowania pojedynczego określonego elementu za pomocą unikalnego identyfikatora, ale. to selektor klasy służący do kierowania wielu elementów do określonej klasy. Innymi słowy:

  • #foo {}stylizuje pojedynczy element zadeklarowany za pomocą atrybutuid="foo"
  • .foo {}stylizuje wszystkie elementy za pomocą atrybutu class="foo"(możesz również przypisać wiele klas do elementu, po prostu oddziel je spacjami, np. class="foo bar")

Typowe zastosowania

Ogólnie rzecz biorąc, używasz # do stylizowania czegoś, o czym wiesz, że pojawi się tylko raz, na przykład, takich jak div układu wysokiego poziomu, takie jak paski boczne, obszary banerów itp.

Klasy są używane tam, gdzie styl się powtarza, np. Gdy mówisz, że kierujesz specjalną formą nagłówka dla komunikatów o błędach, możesz stworzyć styl, h1.error {}który miałby zastosowanie tylko do<h1 class="error">

Specyficzność

Innym aspektem różnic pomiędzy selektorami jest ich specyficzność - selektor id jest uważany za bardziej szczegółowy niż selektor klasy. Oznacza to, że w przypadku konfliktu stylów z elementem, te zdefiniowane za pomocą bardziej szczegółowego selektora zastąpią mniej szczegółowe selektory. Na przykład, biorąc pod uwagę <div id="sidebar" class="box">wszelkie reguły #sidebarzastępowania sprzecznych reguł dla.box

Dowiedz się więcej o selektorach CSS

Zobacz Selectutorial, aby uzyskać więcej świetnych starterów na selektorach CSS - są one niesamowicie potężne, a jeśli twoja koncepcja polega po prostu na tym, że „# jest używany dla DIV”, dobrze byłoby przeczytać dokładnie, jak efektywniej używać CSS.

EDYCJA: Wygląda na to, że Selectutorial mógł przejść do dużej witryny na niebie, więc spróbuj zamiast tego linku do archiwum .

Paul Dixon
źródło
2
Wierzę, że większość przeglądarek, jeśli (nieprawidłowo) określisz wiele elementów o tym samym identyfikatorze, zastosuje regułę z selektorem identyfikatora do wszystkich tych elementów.
Miles
1
@Miles ma rację - myślę, że dokładniej jest powiedzieć / # / target atrybutu „ID” i /./ target „klasy”. Chociaż identyfikator powinien być unikalny, silnik CSS nie sprawdza, że albo troska.
Rex M
@ Rex M - Przydaje się, że biorąc pod uwagę pojedynczy element, nie może mieć więcej niż jednego identyfikatora, czy jest unikalny, czy nie. Próbowałem tego pod Firefoksem i elementy z dwoma identyfikatorami są ignorowane. Elementy mogą jednak mieć wiele klas.
Usagi
Czy div.sidebar to to samo, co div #sidebar?
Ali Gajani
Link Selectutorial jest zły :(
Zeek2,
28

#Oznacza, że pasuje do idelementu. .Oznacza nazwę klasy:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

Zauważ, że w dokumencie HTML atrybut id musi być unikalny , więc jeśli masz więcej niż jeden element wymagający określonego stylu, powinieneś użyć nazwy klasy.

pseudonim
źródło
10

Kropka ( .) oznacza nazwę klasy, a hash ( #) oznacza element o określonym atrybucie id . Klasa będzie miała zastosowanie do każdego elementu ozdobionego tą konkretną klasą, podczas gdy styl # będzie miał zastosowanie tylko do elementu o tym konkretnym identyfikatorze.

Nazwa klasy:

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

Nazwany element:

<style>
   #name { ... }
</style>

<div id="name"></div>
tvanfosson
źródło
„nazwany element” wprowadza w błąd
Bobby Jack
@Bobby - jak to się nazywa, gdy nadajesz elementowi identyfikator - „identyfikujesz” go?
tvanfosson
Zgadzam się z Bobby - elementy mogą mieć zarówno imię, jak i identyfikator. Jak nazywacie takie elementy?
John McCollum
8

Warto również zauważyć, że w kaskadzie , id ( #) selektor jest bardziej specyficzna niż AB ( .) selektora. Dlatego reguły w instrukcji id zastąpią reguły w instrukcji class.

Na przykład, jeśli oba następujące stwierdzenia:

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

są stosowane do tego samego elementu HTML:

<h1 id="specials" class="headline">Today's Specials</h1>

kolor: niebieski przepis miałby zastąpić kolor: czerwony reguły.

Jans Carton
źródło
6

Kilka szybkich rozszerzeń tego, co zostało już powiedziane ...

idMusi być unikalny, ale można używać tego samego identyfikatora do różnych stylów bardziej szczegółowe.

Na przykład, biorąc pod uwagę ten wyciąg 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>

Możesz zastosować różne style za pomocą tych:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }


Kolejna przydatna rzecz do zapamiętania: możesz mieć wiele klas na elemencie, rozdzielając je spacjami ...

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

Co pozwala ci mieć wspólną stylizację .menuz określonymi stylami za pomocą .main.menui.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }
Peter Boughton
źródło
4

.class celuje w następujący element:

<div class="class"></div>

#class celuje w następujący element:

<div id="class"></div>

Pamiętaj, że identyfikator MUSI być unikalny w całym dokumencie, podczas gdy dowolna liczba elementów może dzielić klasę.

Bobby Jack
źródło
4

Jak prawie wszyscy już stwierdzili:

Kropka ( .) wskazuje klasę , a skrót (# ) wskazuje identyfikator .

Podstawowa różnica polega na tym, że możesz wielokrotnie wykorzystywać klasę na swojej stronie, podczas gdy identyfikator można użyć raz. Oczywiście, jeśli trzymasz się standardów WC3.

Strona będzie nadal renderowana, jeśli masz wiele elementów o tym samym identyfikatorze, ale napotkasz problemy, jeśli / kiedy spróbujesz dynamicznie zaktualizować te elementy, wywołując je za pomocą ich identyfikatora, ponieważ nie są one unikalne.

Warto również zauważyć, że właściwości identyfikatora zastąpią właściwości klasy.

Anders
źródło
2

# Jest selektorem identyfikatora. Dopasowuje tylko elementy o pasującym identyfikatorze. Następna reguła stylu dopasuje element, który ma atrybut id o wartości „zielony”:

#green {color: green}

Aby uzyskać więcej informacji, zobacz http://www.w3schools.com/css/css_syntax.asp

tehvan
źródło
-2

Oto moje podejście do wyjaśniania zasad .stylei #stylesą częścią matrycy. że jeśli nie we właściwej kolejności, mogą się wzajemnie nadpisywać lub powodować konflikty.

Oto skład.

Matryca

#style 0,0,1,0 id

.style 0,1,0,0 class

jeśli chcesz zastąpić te dwa, możesz użyć <style></style>czarownicy z poziomem macierzy lub 1,0,0,0. zapytanie @media zastąpi wszystko powyżej ... Nie jestem tego pewien, ale myślę, że selektora ID #można użyć tylko raz na stronie.

Peter Gruppelaar
źródło