Kierowanie zagnieżdżonych elementów za pomocą CSS

Question

Załóżmy, że mam trochę zagnieżdżonych znaczników, które chcę kierować na CSS. To może być cokolwiek, ale na przykład:

<div> 
    <div id='someid'> 
     <span class='someclass'> 
      <a class='link' href='alink'>Go somewhere</a> 
     </span> 
    </div> 
<div> 

Czy dopuszczalne jest, aby napisać regułę CSS kierowania tag <a> bezpośrednio, jak to?

a.link { font-size: large; } 

Czy jest to uważane za niestandardowe, które może się nie udać w niektórych przeglądarkach? Czy muszę kierować każdy element w łańcuchu w ten sposób?

div div span.someclass a.link { font-size: large; } 

Answer 1

Obie są całkowicie dopuszczalne, a odpowiedź zależy od konkretnego rozwiązania. Na przykład, jeśli masz inne obszary, w których udostępniasz wspólne właściwości zdefiniowane przez tę klasę, chcesz zachować ją tak ogólną, jak to tylko możliwe. Jeśli na przykład masz nawigację i łącza w tym obszarze mają pewne wspólne elementy te mogą być zdefiniowane przez a.link

Następnie w zagnieżdżonych html, można zrobić coś takiego

.someclass a.link {font-size:8px} aby ten tekst mniejszy.

Oto artykuł, który opisuje jak specyfika działa: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

Im bardziej ukierunkowany jest twój CSS, tym mniej staje się elastyczny. To twój własny kompromis. Jeśli zamierzasz przekazać linki konkretnej klasie, jestem pewien, że będą one wizualnie takie same, niezależnie od tego, czy pojawią się wewnątrz tego drzewa, czy poza nim, więc możesz trzymać się swojego pierwszego przykładu.

Answer 3

a.link to najlepszy sposób na zrobienie tego. Jeśli chcesz, aby pewne a.link było inne od pozostałych, musisz dodać do niego wagę.

a.link { ... } /* Global */ 
span.someclass a.link { ... } /* Finds all a.link within span.someclass */ 

selektorów potomka (linia 2) nie są najbardziej skutecznym sposobem, aby dodać styl do elementu, więc używaj ich oszczędnie. Osobiście używam ich, gdy chcę nadać stylom specjalnym Globalną Klasę w ramach określonego ID/Klasy.

Answer 4

to faktycznie zaleca się stosowanie a.link zamiast długiej, brzydkiej drugiej opcji, które mogą powodować problemy specyficzności i wydajności.

To nawet lepiej, jeśli używasz tylko .link. To najlepsza opcja.

Answer 5

Oba są całkowicie poprawne, a ich użycie zależy od tego, co chcesz zrobić.

Jeśli tworzysz rodzajowe klasy, który chcesz mieć możliwość korzystania z całej całej witryny niezależnie od tego elementu i gdzie element jest zalecana tylko użycie .class. Dobrym tego przykładem jest coś takiego, jak .icon, którego możesz używać w linkach, elementach list, nagłówkach itp. A chcesz mieć możliwość używania ich wszędzie pod numerem wszędzie pod numerem.

Jeśli tworzysz klasę, która jest specyficzna dla/tylko działa na jednym określonym typie elementu, najlepiej użyć tego elementu również w selektorze.Przykładem może być lista punktowana, którą chcesz wyświetlić w jednym wierszu, ponieważ ta klasa wymaga, aby kod HTML był numerem <ul>, powinieneś także podać go w CSS; ul.inline. W ten sposób możesz użyć nazwy klasy "inline" również dla innych elementów, bez wpływu na styl.

Jeśli używasz tylko klasy, aby wybrać element, ale nie powinna ona mieć żadnej ogólnej stylizacji, powinieneś być konkretny. Na przykład możesz chcieć, aby pierwszy akapit w twoim elemencie #blog-post był większy, wtedy powinieneś określić zarówno klasę, jak i #blog-post i. #blog-post p.first (zwróć uwagę, że te typy klas są rzadko potrzebne dzięki zaawansowanym selektorom, takim jak :first-of-type, h2 + p itd.).

Mówiąc, że ".link jest najlepszy, a.link jest drugi najlepszy, a długi selektor jest zły" jest po prostu źle. Wszystko zależy od sytuacji.