Jak wykluczyć klasę ze wszystkimi dziećmi w definicji stylu

Question

Mam pliku jak

<div> 
<div class="abc"> 
    <div> 
    <!--some more divs inside--> 
    </div> 
</div> 
</div> 

Co chcę zrobić, to zastosować style tylko do pierwszego div. Próbowałem użyć div:not(.abc, .abc *), div:not(.abc):not(.abc *), div:not(.abc), div:not(.abc) *, ale żadna z nich nie zadziałała. Trudno byłoby edytować HTML, ponieważ byłoby wiele plików do edycji. Również powyższy kod pojawia się w różnych miejscach, więc użycie selektora > nie jest rozwiązaniem ... Czy ktoś wie, jak to zrobić?

Answer 1

Nie można niezawodnie używać selektora :not() w CSS do wykluczania elementu i/lub jego potomków. Powód jest wyjaśniony w this answer (i kilku innych, do których prowadzi):

Nie można używać kombinatorów. Działa to w jQuery, ale nie CSS:

/* 
* Grab everything that is neither #foo itself nor within #foo. 
* Notice the descendant combinator (the space) between #foo and *. 
*/ 
:not(#foo, #foo *) 

Ten jest szczególnie przykre, głównie dlatego, że nie ma odpowiedniego obejścia. Istnieje kilka luźnych obejść (1 i 2), ale zazwyczaj zależą one od struktury HTML i dlatego są bardzo ograniczone w użyciu.

A ponieważ znaczniki są na tyle nieprzewidywalne, że nie można go edytować lub użyj wybieraka >, obawiam się, że nie ma wiele sposób dla ciebie inny niż albo znaleźć sposób, aby zastosować klasę do listy top div i użyj tej klasy, jako demonstrated by Fluidbyte, i/lub użyj jQuery, jak sugerowano powyżej.

Answer 2

Użyj :first-child z identyfikatorem lub klasą elementu nadrzędnego. Jeśli nie możesz złapać elementu za pomocą CSS, sugeruje się użycie Javascript lub jQuery.

Answer 3

Zwykle łatwiej jest uwzględnić to, czego potrzebujesz, poprzez klasę, a następnie spróbuj wykluczyć elementy potomne. Zobacz skrzypce tutaj: http://jsfiddle.net/cLtHg/

To dba o kwestie związane z dziedziczeniem i jest o wiele bardziej przyjazne dla różnych przeglądarek.

Answer 4

Wypróbowałeś :first-child lub :nth-child() selecor?

Answer 5

Jeśli naprawdę nie dotykając HTML, następnie prosta, choć brudnej podejściem byłoby zastosować style do pierwszego div, a następnie usunąć je z kolejnych div, tak:

div {margin-bottom: 20px; border: 1px solid #ccc;} 
div div {margin-bottom: 0; border: none;} 

Główną wadą o to, że niektóre style w div dzieci mogą zostać niezamierzone usunięte. Zależy od tego, jak są one stylizowane.