2016-09-15 10 views
0

Im現在プラグインvertical timelineを使用しています。このプラグインは、現在の基本スタイルシートに影響を与えるCSSを使用します。必要に応じて私の理解を修正してください。CSS3の複数のセレクタの1つのクラス

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

私だけcd-containerの要素に影響を与えるには、このために望む:私は、CSSコードの次のブロックを持っています。私は以下のコードに対してこれを実行するための簡単な方法がありますかどうかを知りたい:

.cd-container html, .cd-container body, .cd-container div, .cd-container span, .cd-container applet, .cd-container object, .cd-container iframe, .cd-container 
h1, .cd-container h2, .cd-container h3, .cd-container h4, .cd-container h5, .cd-container h6, .cd-container p, .cd-container blockquote, .cd-container pre, .cd-container 
a, .cd-container abbr, .cd-container acronym, .cd-container address, .cd-container big, .cd-container cite, .cd-container code, .cd-container 
del, .cd-container dfn, .cd-container em, .cd-container img, .cd-container ins, .cd-container kbd, .cd-container q, .cd-container s, .cd-container samp, .cd-container 
small, .cd-container strike, .cd-container strong, .cd-container sub, .cd-container sup, .cd-container tt, .cd-container var, .cd-container 
b, .cd-container u, .cd-container i, .cd-container center, .cd-container 
dl, .cd-container dt, .cd-container dd, .cd-container ol, .cd-container ul, .cd-container li, .cd-container 
fieldset, .cd-container form, .cd-container label, .cd-container legend, .cd-container 
table, .cd-container caption, .cd-container tbody, .cd-container tfoot, .cd-container thead, .cd-container tr, .cd-container th, .cd-container td, .cd-container 
article, .cd-container aside, .cd-container canvas, .cd-container details, .cd-container embed, .cd-container 
figure, .cd-container figcaption, .cd-container footer, .cd-container header, .cd-container hgroup, .cd-container 
menu, .cd-container nav, .cd-container output, .cd-container ruby, .cd-container section, .cd-container summary, .cd-container 
time, .cd-container mark, .cd-container audio, .cd-container video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

次はdemo

<div id="vertTimeline"> 
    <section id="cd-timeline" class="cd-container"> 
     <div class="cd-timeline-block"> 
      <div class="cd-timeline-img cd-picture"> 
       <img src="/Content/plugins/vertical-timeline/img/cd-icon-picture.svg" alt="Picture"> 
      </div> 
      <!-- cd-timeline-img --> 
      <div class="cd-timeline-content"> 
       <h2>Title of section 1</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p> 
       <a href="#0" class="cd-read-more">Read more</a> 
       <span class="cd-date">Jan 14</span> 
      </div> 
      <!-- cd-timeline-content --> 
     </div> 
     <!-- cd-timeline-block --> 
     <div class="cd-timeline-block"> 
      <div class="cd-timeline-img cd-movie"> 
       <img src="/Content/plugins/vertical-timeline/img/cd-icon-movie.svg" alt="Movie"> 
      </div> 
      <!-- cd-timeline-img --> 
      <div class="cd-timeline-content"> 
       <h2>Title of section 2</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p> 
       <a href="#0" class="cd-read-more">Read more</a> 
       <span class="cd-date">Jan 18</span> 
      </div> 
      <!-- cd-timeline-content --> 
     </div> 
     <!-- cd-timeline-block --> 
    </section> 
    <!-- cd-timeline --> 
</div> 
+1

いいえ、あなたが*スコープ*を調べる場合を除きます。これは[** XY問題**](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem)のように感じます –

+1

あなたは何をしようとしていますか?私が見るところでは、あなたは[*]を使ってすべての要素を選択することができます – adamk22

+0

Im [vertical timeline]というプラグインを使用してhttps://codyhouse.co/demo/vertical-timeline/index.htmlとcss私が上記のようなシナリオのために私のデフォルトのスタイルシートを壊すことが付属していること。 – usr4896260

答えて

1

に基づいてタイムラインのための私のコードのスニペットで、これを試してみてください。


*

.cd-container * { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
ユニバーサルセレクタ、あるwhic h 、すべての子孫要素は .cd-containerを選択してください。これがうまくいかない場合は私に教えてください。

+3

残念ながら、これは非常に非効率的な解決策です。単に '*'セレクタが単独では効率が悪いのではなく、ブラウザがスタイルルールを右から左に読むためです。つまり、ブラウザはページ上のすべての要素を対象とし、これらは '.cd-container'である祖先(親だけでなく)を持っています。すべての要素に対して、ブラウザは 'body'と' html'タグまで祖先ツリーを辿り、スタイルが適用されないことをあきらめることができます。 – skyline3000

+0

@ skyline3000それは非効率的な解決策ですが、悲しいことに彼が望むことを達成する唯一の方法です – theEpsilon

関連する問題