copiar css de uma classe para outra?

Question

Isto pode parecer uma pergunta muito básica, mas eu não parecem encontrar uma resposta para ela. Eu sei que é possível definir uma regra CSS para mais de um elemento de uma só vez, como tal:

.element1, .element2{
  font-size:14px;
}

É possível, porém, para fazer exatamente a mesma coisa, mas aplicar o css para elemento após o css para element1 foi definido? Algo parecido com isto:

.element1{
  font-size:14px;
}

/*later in the css... or in a separate file*/

.element2{
 like:".element1";
 font-weight:bold;
}

Assim que element2 agora herda o css de um elemento. A razão que eu estou tentando fazer isso é porque eu tenho uma definição css para um element1 que carrega para todas as páginas do site. Então, para uma determinada página (que carrega o arquivo principal css, juntamente com o seu próprio) Eu gostaria de usar o estilo de element1 e adicionar a ele. O que estou tentando evitar é carregar a definição para element2 para todas as páginas do site (incluindo aqueles que não têm sequer elemento [s] com o element2 classe.

Isso poderia ser feito? Eu percebo que eu poderia facilmente conseguir isso com jQuery (ou seja $(".element2").addClass(".element1");), mas eu gostaria de evitar o uso de scripts para o meu css.

Obrigado!

Answer 1

Você pode usar:

<div class="element1 element2">

enquanto tendo

.element1{
  font-size:14px;
}

.element2{
  font-weight:bold;
}

e assim vai aplicar ambas as classes. jQuery é inteligente o suficiente para adicionar classes e aulas remove assim.

Além disso, você pode usar algo mais avançado, como SASS que alows mixins.

Answer 2

Tanto quanto eu estou ciente, não, isso não é possível apenas com CSS. Você já identificou uma forma de alcançar seus objetivos, e eu teria que sugerem que ele é o melhor caminho.

Em CSS uma classe só pode herdar de seu pai, e apenas se <example-attribute>: inherit; (eu usei isso com color:, background-color:, font-family:, font-size: entre outros, embora eu avisá-lo que se o font-size do pai um tamanho descrito como um aumento ou diminuição, o font-size vai mudar na criança, também.

Answer 3

CSS realmente precisa dessa funcionalidade. Especificando múltiplas classes no nível elemento é grande, mas não o mesmo que ser capaz de ir:

.my_class { class:my_global_class; }

Ser capaz de ter um uso classe estilos de outra classe, seria muito poderosa. Ele iria passar esta parte do modelo de herança para o CSS onde ele pertence, deixando marcação menos desordenado.

Eu estou trabalhando em um site agora, onde temos muitas combinações diferentes de fontes. Alguns h e tags p parecer diferente dependendo da sua página e contexto. É uma verdadeira dor de ter que ter a nossa lista de fontes para font-family ter que existem em cada classe onde nós precisamos deles. Eu adoraria ser capaz de fazer isso:

/* defualt for p tags */
p { font-family:Times, Arial, Helvetica; }

/* exceptions */
.arial {font-family:Arial, Times, Helvetica; }
.segoe {font-family:Segoe, Arial, Helvetica; }

.my-page1 p {class:arial;}
.my-page2 p {class:segoe;}

No exemplo acima, a minha lista de fontes que existem em um local central e posso aplicá-los onde quer que eu quero, puramente no arquivo CSS. Se eu tiver 100 p marcas no meu site, então eu tenho que adicionar uma "classe" a cada um deles para essas exceções, que pode ser uma dor. Isto é especialmente verdade, quando você tem vários desenvolvedores trabalhando em um site.

Answer 4

Do que você descreve você quer .element1 estar disponível e usado em várias páginas, mas em algumas páginas excepcionais que você quer elementos de execução da classe .element1 a olhar diferente, no seu exemplo negrito.

A resposta que lhe foi dada é definitivamente uma abordagem e vai certamente funcionar. Outra coisa que você pode fazer, porém, é para incluir CSS adicional nas páginas excepcionais.

Por exemplo, você pode ter um allpages.css isto é incluir em todas as páginas e contém a CSS:

.element1 {
    font-size: 14px;
}

Em seguida, você pode ter um arquivo CSS separado chamado exceptions.css que contém:

.element1 {
    font-weight: bold;
}

Isso funciona porque quando várias regras são definidas para o mesmo seletor as regras são mesclados. Usando esta técnica você não teria que modificar os valores de classe para elementos HTML.

Answer 5

Sintaxe como o usado na http://lesscss.org/
Eu espero que você vai encontrar alguns funcionários útil lá