Question

我目前正在使用插件vertical timeline。这个插件恰好使用影响我当前基本样式表的CSS。如果需要，请纠正我的理解。我有以下CSS代码块：

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>

Answer 1

试试这个：

.cd-container * {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

*是通用选择器，应该选择.cd-container的所有后代元素。如果这不起作用，请告诉我。

CSS3中多个选择器的一个类

1 个答案: