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ć?
źródło
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ć?
#
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"
)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">
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 #sidebar
zastępowania sprzecznych reguł dla.box
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 .
#
Oznacza, że pasuje doid
elementu..
Oznacza nazwę klasy: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.
źródło
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:
Nazwany element:
źródło
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:
są stosowane do tego samego elementu HTML:
kolor: niebieski przepis miałby zastąpić kolor: czerwony reguły.
źródło
Kilka szybkich rozszerzeń tego, co zostało już powiedziane ...
id
Musi 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:
Możesz zastosować różne style za pomocą tych:
Kolejna przydatna rzecz do zapamiętania: możesz mieć wiele klas na elemencie, rozdzielając je spacjami ...
Co pozwala ci mieć wspólną stylizację
.menu
z określonymi stylami za pomocą.main.menu
i.sub.menu
źródło
.class
celuje w następujący element:#class
celuje w następujący element:Pamiętaj, że identyfikator MUSI być unikalny w całym dokumencie, podczas gdy dowolna liczba elementów może dzielić klasę.
źródło
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.
źródło
# 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”:
Aby uzyskać więcej informacji, zobacz http://www.w3schools.com/css/css_syntax.asp
źródło
Oto moje podejście do wyjaśniania zasad
.style
i#style
są częścią matrycy. że jeśli nie we właściwej kolejności, mogą się wzajemnie nadpisywać lub powodować konflikty.Oto skład.
Matryca
jeśli chcesz zastąpić te dwa, możesz użyć
<style></style>
czarownicy z poziomem macierzy lub1,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.źródło