Question

我的页面中有一些ul和li标签需要设计不同的样式。我不太确定这是否是所谓的制作父标签？

图片显示，css 1中带有数字的圆圈在应该使用css 2的位置重复。

我怎么能这样做只有数字1,2等的圈子与html 1和css 1一起使用？所以现在我的代码是

HTML 1

<div class="col-md-10 col-md-offset-1 col-sm-12 text-center feature-title">

                    <!-- Seminariet bulletpoints -->
                    <h2>HEADLINEU</h2>
                    <div>
                        <ul style="text-align:left">
                            <li>Text 1</li>
                            <li>Text 2</li>
                            <li>Text 2</li>
                        </ul>
                    </div>
                </div>

HTML 2

  <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                            <h2>PROGRAM FOR DAGEN</h2>
                            <ul class="cbp_tmtimeline">
                                <li>
                                    <time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>4/10/13</span> <span>18:30</span></time>
                                    <div class="cbp_tmicon cbp_tmicon-phone"></div>
                                    <div class="cbp_tmlabel">
                                        <h2>Ricebean black-eyed pea</h2>
                                        <p>Winter purslane...</p>
                                    </div>
                                </li>
                            </ul>
    </div>

CSS 1

ul {
  counter-reset: section;
  list-style: none;
  position:relative;

    padding:0;

    display:inline-block;
}
li {
  margin: 0 0 10px 0;
  line-height: 40px;



}
li:before {
  content: counter(section);
  counter-increment: section;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0 20px 0 0;
  border: 1px solid #ccc;
  border-radius: 100%;
  text-align: center;


}

CSS 2

.cbp_tmtimeline > li {
    position: relative;
}

/* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
    display: block;
    width: 25%;
    padding-right: 100px;
    position: absolute;
}

.cbp_tmtimeline > li .cbp_tmtime span {
    display: block;
    text-align: right;
}

.cbp_tmtimeline > li .cbp_tmtime span:first-child {
    font-size: 0.9em;
    color: #bdd0db;
}

Answer 1

使其特定于一个类

.feature-title li:before {
 ...
}

样式不同的ul标签

1 个答案: