2016-09-15 43 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