regras do seletor css --ruleset para todos os elementos dentro de um seletor?

Question

Com a-regras, é possível ter um conjunto de regras para elementos durante esse evento no-regra (como impressão, dispositivos móveis, etc.) Mas o que sobre apenas para um seletor específico?

Eu estou trabalhando em uma página de sub de um local maior, e eu tenho que usar a folha de estilo mestre para qualquer das minhas páginas. Às vezes, uma regra de estilo só fica atropelada por uma regra da folha de estilo mestre. Para superar isso, eu acabar por ter de acrescentar "#mypage blah blah #content" antes de todas as minhas regras para garantir o meu css é mais específico. Ele fica confuso muito rápido. O que eu prefiro fazer é algo como:

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

para que todas as regras I compõem são contidos para o id da seção da página que eu estou trabalhando.

Oh, eu esqueci de mencionar, eu não posso (tanto quanto eu entendo) uso @namespace, como minha página está dentro de um quadro do modelo (daí a necessidade da folha de estilo master), então se eu apenas dizer @namespace (meu-page-url) meu estilo iria substituir a folha de estilo mestre.

Estou faltando alguma coisa simples?

---

Esclarecimento:

Desculpe, eu acho que na minha tentativa de estadia simples que eu era demasiado vago ...

Estou desenvolvendo o conteúdo de uma página, que será colocado dentro de um modelo mais genérico (mastro, navegação da barra lateral, etc) que tem uma folha de estilo global e eu não tenho controle sobre qualquer desse conteúdo.

Eu tenho alguma liberdade com a folha de estilo para apenas minha seção. Eu não quero nenhum minhas regras para substituir acidentalmente a folha de estilo global, e quero evitar ter que usar seletores realmente longos para as minhas regras para evitar a folha de estilo global, substituindo o meu estilo. Por exemplo, se eu quero dizer

"todas as tabelas têm uma borda preta"

corro o risco de colocar uma borda preta em torno de alguns mesa na barra lateral. No entanto, se eu disser

"todas as tabelas dentro do div #content tem uma borda preta"

isso só funciona, desde que eles não têm uma regra mais específica.

Agora, eu posso passar por cada regra e adicionar uma longa série de seletores para garantir que cada uma das minhas regras de obras e apenas para minha seção, mas isso não é realmente atraente ou divertido de fazer. Eu estava esperando que eu pudesse ninho todas as minhas regras dentro de uma regra maior, como no meu exemplo acima, para que eu possa ter uma regra principal:

  #content {

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



 p {
     border: pink;
   }

para que eu só tenho a declarar minha especificidade uma vez que abrange todas as regras dentro dessa regra principal.

Answer 1

Desde que eu li a seguinte regra se encaixa no projeto, é apenas um nível profundo, e é francamente típico da maioria dos sites que eu vi e usados:

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

Isso seria apenas um efeito divs que estão sob o elemento com o ID de conteúdo.

Não há nenhuma maneira de "grupo" essas regras como isso:

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

Isso seria bom, mas, infelizmente, não é a forma como foi escrita.

Answer 2

Nem uma solução perfeita, uma vez que utiliza PHP à base de processamento do lado do servidor, mas isso pode ser bom o suficiente para você:

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

Answer 3

A foi perguntado pergunta muito semelhante (com um título bastante pobre) um tempo atrás.

A resposta mais popular foi Shaun Inman de pré-processamento do lado do servidor (que agora foi substituído pelo CSSCacheer ).

A minha sugestão foi Sass .

Em ambos os casos, este é um pouco de uma deficiência em CSS baunilha.

Answer 4

Você pode ovveride outro estilo com a declaração "importante!":

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

Mais informações: http://www.w3.org/ TR / CSS2 / cascade.html # importantes-regras

Answer 5

Existe uma maneira de fazer isso usando um motor de CSS por exemplo less (Node.js biblioteca).

De acordo com a lesscss website'(e experiência pessoal), você pode regras ninho css como este:

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

e usando o utilitário de linha de comando less compila isso em

#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;
}

Com less você também pode ter variáveis ??com fonte tamanhos etc, por isso faz mudanças muito mais rápido.