css - 修复我的 CSS : How to get the lists and titles to work?

Question

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

1) 第 nth-of-type 无法交替显示标题的背景，它应该像我的 fiddle 中的 CSS 那样交替出现绿色/蓝色，但我似乎无法正确理解语法嵌套，似乎无法弄清楚。

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

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

fiddle 中的代码: ojit_代码

我的 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/

1. 您需要将步骤标题 (h2) 样式基于 .fact-blocks 的第 n 种样式

    .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;
    }

1. 要使订单列表正常工作，只需在 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/