修复我的 CSS：如何让列表和标题正常工作？

Question

我遇到了 2 件事的问题，我似乎无法在我目前正在进行的新设计中找到解决方案。

1) nth-of-type 无法改变标题的背景，它应该是 green/blue 交替，就像我的 fiddle 中的 CSS 但是我似乎无法正确理解语法，因为它是嵌套的，而且似乎无法弄清楚。

2) 我想为我的 ol 列表的数字设置样式，这是一个使用转发器字段的 wordpress 网站，因此数字需要保持计数而不是重新启动，这就是为什么 ol 在 <div class="fact-blocks timeline"> 之外似乎也明白这一点...

非常感谢任何帮助，提前致谢！

fiddle中的代码： http://jsfiddle.net/2unvxqh3/

我的html:

<!-- Start Facts Block Area -->
<div class="facts"><ol class="circles-list">
                <div class="fact-blocks timeline">
            <h2 class="step-title">Cows</h2>
                <img class="factimg" src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" alt="cows is good">
                                        <li>this is number 1</li>
                                        <li>this is number 2</li>
                                        <li>this is number 3</li>
                            </div>
                <div class="fact-blocks timeline">
            <h2 class="step-title">tomatoes</h2>
                <img class="factimg" src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" alt="tomatoes alt tag">
                                        <li>mispar 1</li>
                                        <li>number 2</li>
                                        <li>magniv 3</li>
                            </div>
                <div class="fact-blocks timeline">
            <h2 class="step-title">Envelope</h2>
                <img class="factimg" src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" alt="envelope">
                                        <li>intersting fact about envelope</li>
                                        <li>intersting fact about envelopedfdfdfdf</li>
                                        <li>fdf df dintersting fact about envelope</li>
                            </div>
        </ol></div> <!-- End Facts Block Area -->

我的css:

.fact-blocks {font-size:14px;background: #d8e5f6 none repeat scroll 0 0;border-top:1px solid #b8d0ee}

.timeline::before {
    background: #cecece none repeat scroll 0 0;
    bottom: 0;
    content: "";
    display: block;
    left: 19px;
    position: absolute;
    top: 0;
    width: 12px;
}

.timeline {
    padding: 44px 0 56px 60px;
    position: relative;
}

.step-title:before {
    background: #cecece none repeat scroll 0 0;
    border-radius: 50%;
    content: "";
    height: 28px;
    left: -57px;
    margin-top: -12px;
    position: absolute;
    top: 50%;
    width: 28px;
}

.facts h2 {
    background-color: #72c630;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0 0 45px 9px;
    padding: 11px 24px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    word-spacing: 0;
}

.facts h2:nth-of-type(odd) {
    background-color: #245697;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0 0 45px 9px;
    padding: 11px 24px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    word-spacing: 0;
}

.facts h2:after {
    border-bottom: 8px solid transparent;
    border-right: 11px solid #72c630;
    border-top: 8px solid transparent;
    content: "";
    height: 0;
    left: 0;
    margin: -7px 0 0 -10px;
    position: absolute;
    top: 50%;
    width: 0;
}

.facts h2:nth-of-type(odd):after {
    border-bottom: 8px solid transparent;
    border-right: 11px solid #245697;
    border-top: 8px solid transparent;
    content: "";
    height: 0;
    left: 0;
    margin: -7px 0 0 -10px;
    position: absolute;
    top: 50%;
    width: 0;
}

.fact-blocks:nth-of-type(odd) {background-color:#eff9e8;border-top:1px solid #d0eeb8;}

.factimg {width:300px;height:300px;}
.fact-blocks img {width:300px;border-radius:50%;overflow:hidden;border:7px #cecece solid;box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.6);}

ol.circles-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/

    margin: 0;
    margin-left: 4em;
    padding: 0;

    counter-reset: li-counter;
}
ol.circles-list > li{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
}
ol.circles-list > li:before {
    position: absolute;
    top: 0;
    left: -1.33em;
    width: 1.2em;
    height: 1.2em;

    font-size: 2.5em;
    line-height: 1.2;
    text-align: center;
    color: #f5f5f5;

    border: 3px solid #c5c5c5;
    border-radius: 50%;
    background-color: #464646;
    content: counter(li-counter);
    counter-increment: li-counter;
}

Answer 1

看到它在这里工作：http://jsfiddle.net/ecur0zmf/3/

您需要将 step-title (h2) 样式基于 .fact-blocks

    .fact-blocks:nth-of-type(odd) h2 {
        background-color: #245697;
        border-radius: 2px;
        color: #fff;
        display: inline-block;
        font-family: inherit;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.5;
        margin: 0 0 45px 9px;
        padding: 11px 24px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        word-spacing: 0;
    }

    .fact-blocks:nth-of-type(odd) h2:after {
        border-bottom: 8px solid transparent;
        border-right: 11px solid #245697;
        border-top: 8px solid transparent;
        content: "";
        height: 0;
        left: 0;
        margin: -7px 0 0 -10px;
        position: absolute;
        top: 50%;
        width: 0;
    }

要使订单列表正常工作，只需在 li 周围加上 ol 标签

    <ol>
       <li>mispar 1</li>
       <li>number 2</li>
       <li>magniv 3</li>
    </ol>

要获取您的号码以继续执行此操作：

.facts {counter-reset: li-counter;}

参见：http://jsfiddle.net/ecur0zmf/6/

Answer 2

第一部分 - 斑马线剥离

鉴于您提供的标记，您需要将 nth-type-of 选择器向上移动到 .fact-blocks DIV。您当前的选择器将到达 .fact-blocks 内部并尝试从那里交替样式。

.fact-blocks h2 {
    /* your odd styles */
}
.fact-blocks:nth-of-type(2n) h2 {
    /* your even styles */
}

第二部分 - ol 排序

您可以给您的排序列表一个 start 属性，告诉他们从哪里开始编号。请参阅此 SO post，它解决了有序列表的起始值。

<ol> 或 <ul> 唯一允许的子元素是 <li>。您提供的内容无效。

<ol start="3">
    <li></li>
    <li></li>
</ol>
<ol start="3">
    <li></li>
    <li></li>
</ol>

修复我的 CSS：如何让列表和标题正常工作？

Fixing my CSS: How to get the lists and titles to work?

css

html-lists