Applicazione di stili CSS a tutti gli elementi all'interno di un DIV

Vorrei applicare un file CSS a un DIV concreto nella mia pagina. Questa è la struttura della pagina:Applicazione di stili CSS a tutti gli elementi all'interno di un DIV

<link rel="stylesheet" href="style.css" /> 
... 
<body> 
    <div id="pagina-page" data-role="page"> 
    ... 
    <div id="applyCSS"> 
     (all the elements here must follow a concrete CSS rules) 
    </div> 
    ... 
</body>

ho cercato di applicare le regole del file CSS modifica in questo modo (il file CSS è così grande):

#applyCSS * {  (For all the elements inside "applyCSS" DIV:) 
    .ui-bar-a { 
     ... 
     ... 
    } 
    .ui-bar-a .ui-link-inherit { 
     ... 
    } 
    ... 
}

Ma questa soluzione non funziona . Quindi, come posso farlo?

fonte

2013-04-09 user1702964

Possibile duplicato: http://stackoverflow.com/questions/12110708/limit-stylesheet-to-one-tag-and-descendents/12553605#12553605 – Pavlo

Si potrebbe provare:

#applyCSS .ui-bar-a {property:value} 
#applyCSS .ui-bar-a .ui-link-inherit {property:value}

Ecc, ecc ... E 'questo quello che stai cercando?

fonte

2013-04-09 12:12:55 Arkana

Sì, ma il file è troppo grande, quindi cerco di trovare altro metodo per fare lo stesso. – user1702964

Non è la soluzione perfetta, ma con Notepad ++ è possibile modificare verticalmente qualsiasi numero di righe e applicare questo: p – Arkana

#applyCSS > * { 
    /* Your style */ 
}

controllare questo contenuto JSfiddle

Sarà lo stile tutti i figli e nipoti, ma escluderà senza bloccare il testo che vola nel div stesso e unico obiettivo avvolto (da tag).

fonte

2013-04-09 12:13:00

+12

Mi chiedo perché questo non ha la risposta corretta – 131

Risposta brillante e di prim'ordine. Dovrebbe essere la risposta a questa domanda –

questo target solo per i bambini diretti, quindi dovrebbe essere: #applyCSS * – yennefer

Soluzione alternativa. Inserisci la tua CSS esterno nel file HTML

<link rel="stylesheet" href="css/applyCSS.css"/>

all'interno del applyCSS.css:

#applyCSS { 
     /** Your Style**/ 
    }

fonte

2013-04-09 12:16:24

Non si applica solo all'elemento stesso e non al contenuto al suo interno? –

scrivere tutti classe/id CSS come di seguito. L'ID #applyCSS sarà padre di tutto il codice CSS.

Per esempio si aggiungono classe .ui-bar-a in CSS per l'applicazione al vostro div:

#applyCSS .ui-bar-a { font-size:11px; } /* This will be your CSS part */

Qui di seguito è la tua parte HTML:

<div id="applyCSS"> 
    <div class="ui-bar-a">testing</div> 
</div>

fonte

2013-04-09 12:20:27 Nilesh

Funziona per me ... Grazie –

Com'è diverso dalla risposta di Arkana, che è stata inviata ~ 7 minuti prima? – cimmanon

Se siete alla ricerca di una scorciatoia per la scrittura di tutte dei tuoi selezionatori, quindi un preprocessore CSS (Sass, LESS, Stylus, ecc.) può fare ciò che stai cercando. Tuttavia, gli stili generati devono essere CSS validi.

Sass:

#applyCSS { 
    .ui-bar-a { 
     color: blue; 
    } 
    .ui-bar-a .ui-link-inherit { 
     color: orange; 
    } 
    background: #CCC; 
}

CSS Generated:

#applyCSS { 
    background: #CCC; 
} 

#applyCSS .ui-bar-a { 
    color: blue; 
} 

#applyCSS .ui-bar-a .ui-link-inherit { 
    color: orange; 
}

fonte

2013-04-09 12:21:30 cimmanon

Non capisco il motivo per cui non funziona per voi, per me funziona: http://jsfiddle.net/igorlaszlo/wcm1soma/1/

Il codice HTML

<div id="pagina-page" data-role="page"> 
    <div id="applyCSS"> 
    <!--all the elements here must follow a concrete CSS rules--> 
     <a class="ui-bar-a">This "a" element text should be red 
      <span class="ui-link-inherit">This span text in "a" element should be red too</span> 
     </a>  
    </div> 
</div>

Il CSS

#applyCSS * {color:red;display:block;margin:20px;}

Forse avete alcune regole speciali che non ha condiviso con noi ...

fonte

2015-01-17 08:53:49

.yourWrapperClass * { 
/* your styles for ALL */ 
}

Questo codice si applica stili tutti gli elementi all'interno .yourWrapperClass.

fonte

2016-12-23 09:10:53

Applicazione di stili CSS a tutti gli elementi all'interno di un DIV

risposta

Problemi correlati