come escludere una classe con tutti i bambini nella definizione di stile

Question

Ho un file come

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

Quello che voglio fare è quello di applicare stili solo alla prima div. Ho provato a utilizzare div:not(.abc, .abc *), div:not(.abc):not(.abc *), div:not(.abc), div:not(.abc) * ma nessuno di questi ha funzionato. Sarebbe difficile modificare l'html, perché ci sarebbero molti file da modificare. Anche il codice mostrato sopra appare in posti diversi, quindi usare il selettore > non è la soluzione ... Qualcuno sa come fare?

Answer 1

Non è possibile utilizzare in modo affidabile il selettore :not() in CSS per escludere un elemento e/oi relativi discendenti. La ragione per questo è spiegato in this answer (e alcuni altri che si collega a):

Non è possibile utilizzare combinatori. Questo funziona in jQuery, ma non i CSS:

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

Questo è particolarmente pericoloso, in primo luogo perché non ha alcuna soluzione adeguata. Esistono alcuni soluzioni alternative (1 e 2), ma in genere dipendono dalla struttura HTML e pertanto sono di utilità molto limitata.

E dal momento che il margine di profitto è abbastanza imprevedibile, che non si può modificarlo o utilizzare il selettore >, temo non c'è molto di una via d'uscita per voi altro che sia trovare un modo per applicare una classe per il vostro top div e utilizzare quella classe, come demonstrated by Fluidbyte, e/o usare jQuery, come sopra implicito.

Answer 2

Utilizzare :first-child con l'ID o la classe dell'elemento principale. Se non riesci a catturare l'elemento usando CSS, si consiglia di utilizzare Javascript o jQuery.

Answer 3

Di solito trovo che sia più semplice includere ciò che è necessario tramite una classe, quindi provare ad escludere elementi discendenti. Vedi il violino qui: http://jsfiddle.net/cLtHg/

Che si prende cura dei problemi di ereditarietà ed è molto più cross-browser-friendly.

Answer 4

Hai provato :first-child o :nth-child() selecor?

Answer 5

Se sei veramente senza toccare il codice HTML, quindi un semplice, anche se approccio sporca sarebbe quello di applicare stili alla prima div e poi rimuoverli dalla div successive, in questo modo:

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

Il principale svantaggio ecco che alcuni stili nelle div al bambino possono essere rimossi involontariamente. Dipende da come sono stilizzati in primo luogo.