regole del selettore CSS - set di regole per tutti gli elementi all'interno di un selettore?

Question

Con at-rules, è possibile avere un set di regole per gli elementi durante quell'evento at-rule (come la stampa, i dispositivi mobili, ecc.) Ma per quanto riguarda solo un selettore specifico?

Sto lavorando su una sottopagina di un sito più grande e devo usare il foglio di stile principale per una qualsiasi delle mie pagine. A volte una regola di stile viene appena superata da una regola del foglio di stile principale. Per ovviare a questo, finisco per aggiungere " #mypage #content blah blah " prima di tutte le mie regole per garantire che il mio CSS sia più specifico. Diventa disordinato molto velocemente. Quello che preferirei fare è qualcosa di simile:

@#mypage {
       div {
           border: 1px solid #000;
           }
       div p {
           color: #00f;
           }
       }

in modo che tutte le regole che creo siano contenute nell'ID della sezione della pagina su cui sto lavorando.

Oh, ho dimenticato di menzionare, non posso (per quanto ho capito) usare @namespace, poiché la mia pagina è all'interno di un frame modello (da qui la necessità del foglio di stile principale), quindi se dico semplicemente @namespace (my-page-url) il mio foglio di stile sovrascriverebbe il foglio di stile principale.

Mi manca qualcosa di semplice?

---

Chiarimento:

Mi spiace, nel mio tentativo di rimanere semplice ero troppo vago ...

Sto sviluppando il contenuto di una pagina che verrà inserita all'interno di un modello più generico (masthead, navigazione della barra laterale, ecc.) che ha un foglio di stile globale e non ho alcun controllo su alcuno di tali contenuti.

Ho un po 'di libertà con il foglio di stile solo per la mia sezione. Non voglio che le mie regole sovrascrivano accidentalmente il foglio di stile globale e voglio evitare di dover usare selettori molto lunghi per le mie regole per evitare che il foglio di stile globale sovrascriva il mio foglio di stile. Ad esempio, se voglio dire

" tutte le tabelle hanno un bordo nero "

Rischio di mettere un bordo nero attorno ad un tavolo nella barra laterale. Tuttavia, se dico

" tutte le tabelle all'interno del div #content hanno un bordo nero "

funziona solo se non hanno una regola più specifica.

Ora posso esaminare ogni regola e aggiungere un lungo treno di selettori per garantire che ciascuna delle mie regole funzioni e solo per la mia sezione, ma non è davvero attraente o divertente da fare. Speravo di poter annidare tutte le mie regole all'interno di una regola più ampia, come nel mio esempio sopra, in modo da poter avere una regola principale:

  #content {

    //and place all of my style rules inside of that:



 p {
     border: pink;
   }

quindi devo dichiarare la mia specificità una sola volta e copre tutte le regole all'interno di quella regola principale.

Answer 1

Da quello che ho letto la seguente regola si adatta al conto, è profonda solo un livello ed è francamente tipica della maggior parte dei siti Web che ho visto e usato:

#content div {
  ... your rules ...
}

Ciò avrebbe effetto solo sui div che si trovano sotto l'elemento con l'id del contenuto.

Non c'è modo di " raggruppare " queste regole così:

#content {
  div {
    ... your rules ...
  }
}

Sarebbe bello, ma purtroppo non è il modo in cui è stato scritto.

Answer 2

Non è una soluzione perfetta, dal momento che utilizza l'elaborazione lato server basata su PHP, ma questo potrebbe essere abbastanza buono per te:

http://www.shauninman.com/archive/2007/06 / 27 / css_server_side_pre_processor

Answer 3

È stata posta una una domanda molto simile (con un titolo piuttosto scarso) un po 'di tempo fa.

La risposta più popolare è stata Shaun Inman's preprocessore lato server (che ora è stato sostituito da CSSCacheer ).

Il mio suggerimento era Sass .

In entrambi i casi, si tratta in qualche modo di una carenza del CSS vaniglia.

Answer 4

Puoi nascondere l'altro foglio di stile con "! important " Dichiarazione:

div {
    border: 1px solid #000 !important;
    }
div p {
    color: #00f !important;
    }

Ulteriori informazioni: http://www.w3.org/ TR / CSS2 / cascade.html # importanti-regole

Answer 5

C'è un modo per farlo usando un motore CSS ad es. less (libreria node.js).

Secondo il lesscss 'sito web (ed esperienza personale) puoi nidificare le regole css in questo modo:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

e usando l'utilità della riga di comando less compila questo in

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Con less puoi anche avere variabili con dimensioni dei caratteri ecc., quindi rende le modifiche molto più veloci.