Jaka jest różnica między klasami CSS .foo.bar (bez spacji) i .foo .bar (z miejsca)

Question

Powiel możliwe:
Difference between .classA.classB and .classA .classB in CSS?

Czy mógłbyś wyjaśnić mi się różnica między tymi klasami składni dwa CSS:

.element .symbol {} 

i

.element.large .symbol {} 

Nie rozumiem różnicy między tymi dwoma. Pierwsza linia wskazuje dwie różne klasy, do których są stosowane te same style. Ale o drugim, jakie jest znaczenie słowa ".large", które jest przypisane do ".element"?

Answer 1

Myślę, że masz niewielkie nieporozumienie co oznacza pierwszy.

.element .symbol {} 

Oznacza to, że te ustawienia CSS są stosowane do każdego elementu HTML z klasą .symbol który jest wewnątrz elementu z klasą .element.

<div class="element"> 
    <div class="symbol" /> 
</div> 

W tym przykładzie Twój wpis pierwszy CSS wpłynęłoby tag w środku <div>.

Twój drugi przykład oznacza, że ​​pierwsza klasa wymaga wpływu dwóch klas. Poza tym jest równy pierwszemu.

<div class="element large"> 
    <div class="symbol" /> 
</div> 

Więc jeśli HTML wygląda tak, wartości CSS zostaną zastosowane do wewnętrznej <div> tagu również.

Jeśli chcesz ustawić tagi CSS, które mają zastosowanie do wielu klas oddzielnie, musisz podzielić je za pomocą przecinka. Więc wygląda to tak:

.element, .symbol {} 

Edit: Wnioskiem link do documentation z selektorów CSS.

Answer 2

.element .symbol 

oznacza .symbol wewnątrz .element

.element.symbol 

oznacza .element że ma klasę symbol również.

Więc

.element.large .symbol 

oznacza .symbol wewnątrz .element że ma klasę large również.

Answer 3

W drugim przykładzie pierwsza część selektora to po prostu element z dwiema klasami, tak jak w <span class="element large"> lub <span class="large element">.

Ogólnie każda część selektora dotyczy jednego elementu HTML.

table[border].clname oznacza tabelę z atrybutem border i klasą clname, natomiast table [border] .clname oznacza element z nazwą klasy, w elemencie z atrybutem border, w tabeli.

(Edit: No, mówię "jeden element HTML", ale oczywiście można mieć więcej niż jedną tabelę, że dotyczy to zrozumieć.).

Answer 4

Korzystanie

.element.large 

dotyczy element z obu klas:

<div class="element large"></div> 

zamiast potomka elementu:

.element .large 

co oznacza, że:

<div class="element"> 
    <div class="large"></div> 
</div> 

tylko

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

jest 'odbieranie' style.

Zasadniczo, oddzielenie spacją oznacza dwa elementy o relacji descendant.

Answer 5

Będziesz używał .element .symbol tego, gdzie masz element wewnątrz innego elementu. Na przykład:

<div class="element"> 
    <i class="symbol"></i> 
</div> 

Jeśli w dół drogi chciał odróżnić niektóre div, można dodać dodatkową klasę kierować tylko te, które się różnią, i kierować ją .element.large .symbol. Na przykład:

<div class="element large"> 
    <i class="symbol"></i> 
</div>