56

ページ内の具体的な 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 {
       ...
    }
    ...
}

しかし、その解決策は機能しません。それで、どうすればそれを行うことができますか？

4

7 に答える 7

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

このJSfiddleをチェックしてください

すべての子と孫のスタイルを設定しますが、div 自体のあいまいなテキストを除外し、(タグで) ラップされたコンテンツのみを対象とします。

于 2013-04-09T12:13:00.813 に答える
31

あなたは試すことができます：

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

などなど...それはあなたが探しているものですか?

于 2013-04-09T12:12:55.550 に答える
9

なぜそれがうまくいかないのか理解できません。

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

たぶん、私たちと共有していない特別なルールがあるかもしれません...

于 2015-01-17T08:53:49.623 に答える
6

すべてのセレクターを書き出すためのショートカットを探している場合は、CSS プリプロセッサー (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-09T12:21:30.270 に答える
0

代替ソリューション。外部 CSS を HTML ファイルに含めます。

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

applyCSS.css 内:

   #applyCSS {
      /** Your Style**/
    }
于 2013-04-09T12:16:24.180 に答える