2016-09-15 44 views
0

我目前正在使用插件vertical timeline。这个插件恰好使用影响我当前基本样式表的CSS。如果需要请纠正我的理解。我的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。我想知道如果有一个简单的方法来做到这一点与下面的代码:

.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

使用名为[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