2016-09-15 2 views
0

Im 현재 플러그인 vertical timeline을 사용 중입니다. 이 플러그인은 현재 기본 스타일 시트에 영향을주는 CSS를 사용합니다. 필요한 경우 제 이해를 교정하십시오.CSS3의 다중 선택자를위한 하나의 클래스

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

아니요, * scoping *을보고 싶지 않은 경우는 없습니다. 이 느낌은 [** XY 문제 **] (http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) –

+1

정확히 무엇을하려는 것입니까? 내가보기에는 '*'를 사용하여 모든 요소를 ​​선택할 수 있습니다. – adamk22

+0

[세로 타임 라인]이라는 플러그인을 사용하여 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