首页 > 开发 > CSS > 正文

last-child不起作用

2017-09-12 09:34:59  来源: 网友分享
<div id="taskContainer" style="display: block;">        <table class="table table-bordered table-hover" id="taskTable" cellpadding="0" cellspacing="0">            <thead>            <tr>                <th>任务执行人</th>                <th>完成状态</th>                <th>完成时间</th>            </tr>            </thead>            <tbody id="taskTableBody">            @{            var listExecution = Model.listtaskexecution;            if (listExecution != null && listExecution.Count > 0)            {            foreach (var item in Model.listtaskexecution)            {            <tr>                <td>@(item.executbyname == null ? "" : item.executbyname)</td>                <td>@(item.executon == null ? "待完成" : "已完成")</td>                <td>@(item.executon)</td>            </tr>            }            }            }            </tbody>        </table>        @{        if (Model.listtaskexecution != null && Model.listtaskexecution.Count > 0)        {        foreach (var exectionItem in Model.listtaskexecution)        {        <div class="clearfix" style="margin-top:2rem; margin-bottom: 1em;">            <div class="operatorDetail">                <div class="left operatorImg">                    <img class=".left" src="@exectionItem.avatar">                </div>                <div class="left operatorContent">                    <div class="operatorInfo">                        <h3>                            @exectionItem.executbyname                        </h3>                        <p>                            @exectionItem.executon                        </p>                    </div>                    <p>@exectionItem.executiondescription</p>                        @{                        if (exectionItem.listimgurl != null && exectionItem.listimgurl.Count > 0)                        {                        foreach (var imgItem in exectionItem.listimgurl)                        {                    <div class="itemImg left">                        <img src="@imgItem"/>                    </div>                    }                        }                        }                </div>            </div>        </div>        }        }        }    </div>
#taskContainer .operatorDetail:nth-last-child(1){  border-bottom:none;}


全选出了了啊 为什么啊

解决方案

The :nth-last-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings after it in the document tree, for a given positive or zero value for n, and has a parent element.

先看定义,nth 这种都是选择同级别最后一个元素。但是看你的结构是这样的:

.clearfix>.operatorDetail.clearfix>.operatorDetail.clearfix>.operatorDetail

目标元素 .operatorDetail 都没有兄弟节点,是唯一一个,也就是全都是最后一个。所以就全被选中了。