DIV内のすべての要素にCSSスタイルを適用する

私のページの具象DIVにCSSファイルを適用したいと思います。これは、ページの構造である：DIV内のすべての要素にCSSスタイルを適用する

<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>

私は（CSSファイルは非常に大きい）、このようにそれを編集するCSSファイルのルールを適用しようとしました：

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

しかし、そのソリューションが動作しません。。だから、どうすればいい？あなたが試みることができる

出典

2013-04-09 user1702964

可能な複製：http://stackoverflow.com/questions/12110708/limit-stylesheet-to-one-tag-and-descendents/12553605#12553605 – Pavlo

：

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

等など...あなたが探しているものということですか？

出典

2013-04-09 12:12:55 Arkana

はい、ファイルが大きすぎますので、見つけようとしています同じことを行うための他の方法。 – user1702964

完璧な解決策ではありませんが、Notepad ++では垂直方向に任意の数の行を編集して適用することができます：p – Arkana

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

チェックこのJSfiddle

これは、すべての子供や孫のスタイルを設定しますが、div要素自体は緩く飛行テキストおよび（タグによって）ラップのみ対象コンテンツを除外します。

出典

2013-04-09 12:13:00

+12

なぜこれに正解がないのでしょうか？ – 131

華麗で一流の応答です。この質問への答えは –

であるべきです。これは直接的な子供を対象にしているので、それは次のようにする必要があります：#applyCSS * – yennefer

代替溶液。

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

出典

2013-04-09 12:16:24

これは、その要素にのみ適用され、内部の内容ではないでしょうか？ –

書き込み以下のように、すべてのクラス/ IDのCSS：applyCSS.css内部

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

によってあなたのHTMLファイルに外部CSSを含めます。 #applyCSS IDはすべてのCSSコードの親となります。あなたのdivに適用するためのCSSでクラス.ui-bar-aを追加たとえば

：

以下

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

は、あなたのHTMLの一部です：

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

出典

2013-04-09 12:20:27 Nilesh

それは私のために働いています...ありがとう –

これは7分前に提出されたArkanaの答えとはどのように違いますか？ – cimmanon

あなたはすべてを書き出すためのショートカットを探しているならCSS Preprocessor（Sass、LESS、Stylusなど）は、あなたが探しているものを行うことができます。ただし、生成されるスタイルは有効なCSSでなければなりません。

サス：

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

生成されたCSS：それはあなたのために動作しない理由を私は理解していない

#applyCSS { 
    background: #CCC; 
} 

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

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

出典

2013-04-09 12:21:30 cimmanon

は、それが私の作品：http://jsfiddle.net/igorlaszlo/wcm1soma/1/

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>

CSS

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

たぶん、あなたは、このコードはスタイルに.yourWrapperClass内のすべての要素を適用します

出典

2015-01-17 08:53:49

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

...あなたは私たちと共有していなかったいくつかの特別なルールがあります。

出典

2016-12-23 09:10:53

DIV内のすべての要素にCSSスタイルを適用する

答えて

関連する問題