W CSS jaka jest różnica między "."i" # " przy deklarowaniu zbioru stylów?

# oznacza, że pasuje do id elementu. . 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 klasę nazwę, podczas gdy hash (#) oznacza element z określonym atrybutem id . Klasa będzie miała zastosowanie do każdego elementu udekorowanego daną klasą, podczas gdy # style będzie miał zastosowanie tylko do elementu o tym konkretnym id.

Nazwa klasy:

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

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

Nazwa elementu:

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

<div id="name"></div>

Warto również zauważyć, że w kaskadzie , id (#) Selektor jest bardziej specyficzny niż selektor b (.). Dlatego reguły w instrukcji id nadpisują reguły w instrukcji class.

Na przykład, jeśli oba poniższe 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>

Regułacolor:blue zastąpiłaby regułę color:red .

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

An id musi być unikalne, ale możesz użyć tego samego identyfikatora, aby uszczegółowić różne style.

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: możesz mieć wiele klas na elemencie, rozdzielając je spacjami...

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

Co pozwala na wspólną stylizację w .menu z specyficzne style przy użyciu .main.menu i .sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

Jak prawie wszyscy już stwierdzili:

A period (.) oznacza klasę , a hash (#) oznacza identyfikator .

Zasadnicza różnica między tym polega na tym, że możesz wielokrotnie używać klasy na swojej stronie, podczas gdy identyfikator może być użyty raz. Oczywiście, jeśli trzymasz się standardów WC3.

Strona nadal będzie renderowana, jeśli masz kilka elementów o tym samym ID, ale napotkasz problemy, jeśli/przy próbie dynamicznego zaktualizuj wspomniane elementy, wywołując je z ich ID, ponieważ nie są one unikalne.

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

.class celuje w następujący element:

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

#class celuje w następujący element:

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

Zauważ, że identyfikator musi być unikalny w całym dokumencie, podczas gdy dowolna liczba elementów może współdzielić klasę.

# jest selektorem id. Dopasowuje tylko elementy o pasującym id. Następna reguła stylu będzie pasowała do elementu, który ma atrybut id o wartości "green":

#green {color: green}

Zobacz http://www.w3schools.com/css/css_syntax.asp więcej informacji

Oto moje podejście do wyjaśnienia reguł te .style i #style są częścią macierzy. że jeśli nie w odpowiedniej kolejności, mogą się wzajemnie nadpisywać lub powodować konflikty.

Macierz

#style 0,0,1,0 id

.style 0,1,0,0 class

Jeśli chcesz nadpisać te dwa możesz użyć <style></style> wiedźma ma poziom macierzy lub 1,0,0,0. @ Media query nadpiszą wszystko powyżej... Nie jestem tego pewien, ale myślę, że selektor ID # może być użyty tylko raz na stronie.