Stili CSS e sovrascrittura su elementi nidificati

Questo è venuto da un'altra domanda che è stata posta here ma immagino che sia qualcosa che probabilmente ha un approccio "Best Practice".Stili CSS e sovrascrittura su elementi nidificati

Durante la progettazione di un sito Web, il progettista molto probabilmente unirà un insieme di stili generici per tutti gli elementi all'interno di un sito web. (Caratteri standard per testo in Div/Span/H1/H2s)

Nel caso di tabelle, possono definire anche i bordi e gli allineamenti predefiniti in tutto il sito ... ad es.

Table 
{ 
    border: dashed 1px #333333; 
    padding: 2px; 
}

Tuttavia, se si dispone di una tabella all'interno di una tabella (da esempio RSolberg s', un AJAX Calendario all'interno di un DataGrid), allora sia i genitori & tabelle nidificate saranno entrambi erediterà questi stili. (Supponiamo che per questo si chiamino Cascading)

La mia domanda è qual è la pratica migliore per applicare gli stili alla maggior parte degli elementi senza che anche i sottoelementi li ereditino.

Dovresti solo fornire un override che annulla qualsiasi stile applicato.

ad es.

Table 
{ 
    border: dashed 1px #333333; 
    padding: 2px; 
} 

Table Table 
{ 
    border: solid 0px #000000; 
    padding: 0px; 
}

fonte

2009-04-21 Eoin Campbell

So che entrambe queste soluzioni funzioneranno. Mi sto chiedendo da un punto di vista dei progettisti Html/Css quale sia la migliore pratica. Presumo che non ci sia una bandiera CSS magica che dice "Applica N livelli profondi e ferma" –

Se si dispone di HTML in questo modo:.


<html> 
    ... 
    <body> 
    <div> 
     <div> 
     <div> 
    <div> 
    </body> 
</html>

Si potrebbe applicare stili solo al div che è figlio dell'elemento body tramite il selettore bambino (>) like this:

 body > div { border:solid 1px orange; }

The nested div non sarà possibile ottenere un bordo

Per ulteriori informazioni, visitare: http://www.w3.org/TR/CSS2/selector.html#child-selectors.

Si prega di notare che Internet Explorer 6 non suppo il selettore di programmi .

fonte

2009-04-21 18:43:20 knut

aha questo è più vicino a quello che avevo in mente. Quindi è possibile specificare "stili di sito di livello superiore" che verrebbero applicati alle strutture principali del sito, senza preoccuparsi di rovinare il contenuto di tali elementi. Grazie, grazie –

Sì. La regola "tabella tabella" sostituirà la regola "tabella" perché è more specific. Quello che hai descritto è il modo migliore per avere uno stile per la tabella più esterna e un altro stile per le tabelle interne - presupponendo che nessuna delle due tabelle abbia una classe o un ID che permetta di usare più selettori semantici.

In pratica, è più probabile che sia necessario utilizzare questa tecnica con elenchi.

ol { list-style: upper-roman } 
ol ol { list-style: upper-alpha } 
ol ol ol { list-style: lower-roman } 
ol ol ol ol { list-style: lower-alpha }

fonte

2009-04-21 18:30:48

Aggiungere una classe o id alla tabella esterna:

<style type="text/css"> 
.outer {border: dashed 1px #333333;} 
</style> 
</head> 
<body> 
    <table class="outer"> 
    <tr><td>before inner table. 
    <table> 
    <tr> 
    <td>Inside inner table.</td> 
    </tr> 
    </table> 
    After inner table. 
    </td> 
    </tr> 
    </table>  
</body>

Guardalo here

Se non è possibile aggiungere id o classi per il codice HTML e assumendo la tabella che si desidera lo stile non è all'interno di un'altra tabella, è possibile modificarlo specificando quale elemento è figlio di:

div > table {border: dashed 1px #333333;}

Vedere here

Anche se questo selettore è stato implementato solo in IE7, quindi se è necessario supportare IE6 sarà necessario utilizzare il metodo di override dalla domanda.

fonte

2009-04-21 18:36:26

Questo non è sempre fattibile Sam. Ci sono alcuni scenari in cui hai a che fare con i controlli lato server che diffondono l'HTML dove dover aggiungere ID/nomi di classe potrebbe significare scrivere un po 'di codice OnRender per attaccarlo. Sto parlando del modo migliore per fornire sostituzioni a diversi livelli di nidificazione quando non ci sono # ID /. ClassNames da filtrare per –

Aggiunto un modo per farlo senza aggiungere all'HTML, ma fino a quando IE6 non verrà utilizzato potrebbe ci vorrà un po 'di tempo prima che possiamo chiamarlo pratica standard. –

Sono d'accordo con la tua idea iniziale su questo, tuttavia dipende dalla circostanza.

Creare sempre la regola di base e aggiungere al foglio di stile con eccezioni a tale regola.

Ad esempio, se si è sicuri che una tabella all'interno di una tabella non avrà sicuramente bisogno dello stesso stile applicato, utilizzare il selettore "table table" per impostare lo stile. Se tuttavia ciò può verificarsi solo una volta, imposta una classe sulla tabella genitore e modifica il selettore "table table" in modo che corrisponda a "table.parent table".

Tuttavia "genitore" dovrebbe essere modificato in un nome descrittivo per l'elemento, come il calendario così com'è. Non dovresti nominare una classe dopo uno stile particolare perché se lo stile cambia non ha più senso.

fonte

2009-04-21 18:54:12

Stili CSS e sovrascrittura su elementi nidificati

risposta

Problemi correlati