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

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ć?

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 .

#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.

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>

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.

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
{ ... }

.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ę.

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.

# 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

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.