【问题标题】:nth-child issue with jquery accordion with odd/ even rows带有奇数/偶数行的jquery手风琴的nth-child问题
【发布时间】:2012-03-27 19:04:31
【问题描述】:

我有一个 jquery 手风琴,我想使用 nth-child 来分配奇数/偶数背景。

结构是这样的:

<div class="jobmenu accordion">
    <a>
        <section>
            <article><img.....></article>
            <article>Item 1 name</article>
            <article>123</article>
        </section>
    </a> 
    <div>
        <table class="itemTable">
            <thead>...</thead>
            <tbody>...</tbody>
        </table>
    </div> 
    <a>
        <section>
            <article><img.....></article>
            <article>Item 2 name</article>
            <article>432</article>
        </section>
    </a> 
    <div>
        <table class="itemTable">
            <thead>...</thead>
            <tbody>...</tbody>
        </table>
    </div>     
</div>

nth-child 在为 tbody 中的 trs 分配奇数和偶数值的表上工作得很好,但我想对手风琴做同样的事情。这些文章都可以正常工作,为第 n 个孩子设置宽度,以便对可折叠列表有统一的外观,但每个“a”都分配给奇数样式。除非我在 php 中物理添加一个类,但这违背了干净的 css 设计的意义。

css 是:

.jobmenu a {
    height:40px;
}

.jobmenu a:nth-child(even){
    background: #CCC;
    font-size: 12px;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon imageglossyback.gif*/
    width: auto;
    padding: 4px 0;
    padding-left: 10px;
    padding-right:10px;
    text-decoration: none;
    cursor:pointer;
}

.jobmenu a:nth-child(odd){
    background: #999;
    font-size: 12px;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon imageglossyback.gif*/
    width: auto;
    padding: 4px 0;
    padding-left: 10px;
    padding-right:10px;
    text-decoration: none;
    cursor:pointer;
}
.jobmenu article:nth-child(1)
{
    width:350px; margin-left:15px; text-wrap:normal; float:left;
}

.jobmenu article:nth-child(2)
{
    width:100px; float:left;
}

.jobmenu article:nth-child(3)
{
    width:200px; float:left;
}

我假设这是因为 a 位于奇数位置,而 div 位于偶数位置。有没有办法解决这个问题?

【问题讨论】:

    标签: jquery css accordion css-selectors


    【解决方案1】:
    .jobmenu a:nth-child(4n+1){
        /*style*/
    }
    

    我试过了,效果很好。

    【讨论】:

      猜你喜欢
      • 2011-07-08
      • 2012-07-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-09-18
      • 2014-10-23
      相关资源
      最近更新 更多