あるクラスから別のクラスにCSSをコピーしますか？

StackOverflow https://stackoverflow.com/questions/1211511

  •  06-07-2019
  •  | 
  •  

質問

これは非常に基本的な質問のように思えるかもしれませんが、その答えを見つけることができなかったようです。 私は、それ自体として複数の要素に対してCSSルールを定義することが可能であることを知っています：

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

しかし、まったく同じことを行うことはできますが、element1のcssが定義された後にcssを要素に適用することはできますか？このようなもの：

.element1{
  font-size:14px;
}

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

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

したがって、element2は要素1のCSSを継承します。 これをしようとしている理由は、サイトのすべてのページにロードするelement1のCSS定義があるためです。次に、1つの特定のページ（メインのcssファイルとそれ自体を読み込むページ）について、element1のスタイルを使用して追加します。 私が避けようとしているのは、サイト上のすべてのページ（クラスelement2のelement [s]を持たないページも含む）のelement2の定義をロードすることです。

これはできますか？ jQuery（つまり$(".element2").addClass(".element1");）でこれを簡単に達成できることに気付きましたが、CSSでスクリプトを使用しないようにしたいと思います。

ありがとう！

役に立ちましたか？

解決

次を使用できます：

<div class="element1 element2">

持っている間

.element1{
  font-size:14px;
}

.element2{
  font-weight:bold;
}

したがって、両方のクラスが適用されます。 jQueryは、クラスを追加したり、このようなクラスを削除したりするのに十分スマートです。

また、ミックスインを許可する SASS のようなより高度なものを使用できます。

他のヒント

私が知っている限りでは、いいえ、これはCSSだけでは不可能です。あなたはすでにあなたの目的を達成する一つの方法を特定しました、そして私はそれがより良い方法であることを提案しなければなりません。

CSSでは、クラスはその親からのみ継承でき、その後<example-attribute>: inherit;（特にcolor:、background-color:、font-family:、font-size:でこれを使用しましたが、警告しますが親のfont-sizeのサイズが増加または減少として記述されている場合、子の<=>も変更されます。

CSSはこの機能を本当に必要とします。要素レベルで複数のクラスを指定することは素晴らしいことですが、行くことができることと同じではありません：

.my_class { class:my_global_class; }

クラスで別のクラスのスタイルを使用できるようにすると、非常に強力になります。継承モデルのこの部分を、それが属するCSSに移動し、混乱の少ないマークアップを残します。

私は現在、さまざまなフォントの組み合わせがたくさんあるサイトに取り組んでいます。一部のhタグとpタグは、ページとコンテキストによって異なるように見えます。フォントファミリ用のフォントのリストが必要なすべてのクラスに存在しなければならないのは、本当に苦痛です。これができるようになりたいです：

/* 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;}

上記では、フォントのリストが1つの中心的な場所に存在し、CSSファイル内の任意の場所にフォントを適用できます。サイトに100個のpタグがある場合、<！> quot; class <！> quot;を追加する必要があります。それらの例外のためにそれらのそれぞれに、それは痛みになる可能性があります。これは、1つのサイトで複数の開発者が作業している場合に特に当てはまります。

説明から、.element1を複数のページで使用して使用したいが、いくつかの例外的なページでは、.element1クラスを実装する要素を異なるように見せたい（太字の例）

あなたが与えられた答えは間違いなく一つのアプローチであり、間違いなく機能します。ただし、例外的なページに追加のCSSを含めることもできます。

たとえば、すべてのページに含まれ、CSSを含むallpages.cssを使用できます。

.element1 {
    font-size: 14px;
}

その後、次を含むexceptions.cssという別のCSSファイルを作成できます。

.element1 {
    font-weight: bold;
}

これは、同じセレクターに対して複数のルールが定義されている場合、ルールがマージされるため機能します。この手法を使用すると、HTML要素のクラス値を変更する必要がなくなります。

http://lesscss.org/
で使用されているような構文 役に立つスタッフが見つかることを願っています

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top