1. Dom
  2. Pytanie i odpowiedź
  3. zaleca css notacja

zaleca css notacja

2012-05-28 17 views
5

Mam div z ID:zaleca css notacja

<div id="main">

Jaka jest prawidłowa (lub różnicy) pomiędzy

div#main {

i

#main {

Pozdrowienia,

Źródło

2012-05-28 Teson

Odpowiedz

3

Jest a great doco na użyciu skutecznych selektorów CSS, koncentrują się na przepisów ze zbyt wykwalifikowanych selektorów:

Selektory ID są unikalne definicji. W tym kwalifikatory lub klasyfikatory klasy po prostu dodają nadmiarowe informacje, które wymagają niepotrzebnego oszacowania .

Zamiast stosowania styl do elementu o identyfikatorze main Twój selektor ponownie zakwalifikować element, sprawdzając, czy nie jest to również div (w tej kolejności).Aby wyjaśnić: selektory CSS są oceniane prawej do lewej, w odróżnieniu od samej składni selektora gdy używany w jQuery itp

sugestia

Re pixelistik że div#main jest bardziej szczegółowy niż #main - tak, że jest to technicznie poprawne, jednak jeśli trzeba uciekajcie się do tego, aby podnieść specyfikę reguły, jest szansa, że ​​struktura CSS, nad którą pracujemy, nie jest tak przemyślana, jak powinna być.

Źródło

2012-05-28 22:37:26

2

Różnica polega na tym, że:

Podczas pisania div#main styl będzie tylko dla elementu <div>. Kiedy piszesz #main może on być stosowany jako styl dla <div>, <span>, <p> itp

A co zalecane jest trudno powiedzieć, każdy deweloper ma ona inna. Używam na przykład span.<nameClass>, gdy na przykład jest zagnieżdżony w <li>.

#nav li span.href a { 
... 
}

myślę, że to jest używane, gdy chcesz, aby ktoś z klasy określonej nazwie może mieć tylko jeden element.

Tak więc, kiedy piszesz span#href, będzie działać tylko dla , a nie dla innych. Kiedy napiszesz #href, będzie działać dla <span id="href">Simply dummy text</span> lub <a href="#" id="href">Link</a>, ale oba są poprawne, gdy również pytasz o to. Różnice pisałem powyżej.

Źródło

2012-05-28 22:25:58 Sajmon

+0

Dzięki, ale związane z dostarczonym kodem? Oba divy. – Teson

+0

tak edytowany człowiek :-) – Sajmon

+0

Zderzenie ID? Nigdy tam nie idę ... – Teson

2

pasuje do wszystkiego z identyfikatorem "główny", natomiast div#main pasuje tylko do elementów z identyfikatorem głównym o numerach <div>.

Najlepiej, jeśli nigdy nie powinieneś mieć dwóch elementów z tym samym identyfikatorem, więc realistycznie te dwie rzeczy nie robią różnicy, ale prawdopodobnie występują problemy związane z wydajnością dotyczące tego, czy podanie wartości div powoduje szybsze znalezienie wyniku.

Źródło

2012-05-28 22:26:52 Death

+2

Powoduje spowolnienie w rzeczywistości. Jak już powiedziałem w mojej odpowiedzi poniżej, selektory css są przetwarzane w trybie RTL, co oznacza, że ​​po znalezieniu elementu o identyfikatorze 'main', silnik renderujący będzie musiał sprawdzić, czy jest to również' div'. Chociaż wysiłki wokół tego mogą być postrzegane jako pomijalne, martwię się bardziej o wpływ strukturalny i ewentualnie niechciane przesłonięcie specyficzności. –

+2

@ o.v. To, że typ elementu jest sprawdzany po znalezieniu przez przeglądarkę jego identyfikatora, nie ma nic wspólnego z parsowaniem RTL. Parsowanie RTL działa na kombinatorach. – BoltClock

+0

@BoltClock: rozważ dwa scenariusze, kiedy '#aa .bbb' jest oceniane przez silnik renderujący i kiedy jest używane do dopasowywania elementów DOM w/JS. W pierwszym scenariuszu wszystkie elementy pasujące do '.bbb' zostaną znalezione jako pierwsze, a następnie ponownie zakwali- fikowane przez wyszukiwanie ich rodzica (RTL). W drugim scenariuszu znaleziony został (szybko) element pasujący do '# aaa', a następnie jego potomkowie są poszukiwani w dopasowaniu do' .bbb'. To właśnie miałem na myśli mówiąc, że * selektory css są przetwarzane RTL * - dwa różne sposoby rozwiązywania tego samego problemu. I nie wiem dlaczego, po prostu idę z prądem :) –

Powiązane problemy

 Powiązane problemy