問題描述

<p style='display: block;'><table 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){<p style='margin-top:2rem; margin-bottom: 1em;'> <p class='operatorDetail'><p class='left operatorImg'> <img src='http://m.lshqa.cn/wenda/@exectionItem.avatar'></p><p class='left operatorContent'> <p class='operatorInfo'><h3> @exectionItem.executbyname</h3><p> @exectionItem.executon</p> </p> <p>@exectionItem.executiondescription</p>@{if (exectionItem.listimgurl != null && exectionItem.listimgurl.Count > 0){foreach (var imgItem in exectionItem.listimgurl){ <p class='itemImg left'><img src='http://m.lshqa.cn/wenda/@imgItem'/> </p> }}}</p> </p></p>}}} </p>

#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 都沒有兄弟節點，是唯一一個，也就是全都是最后一個。所以就全被選中了。

因為nth-last-child相對于的是父級標簽的元素位置。

你的選擇器的意思就是選中所有clearfix下倒數第一個子元素，而且類名是operatorDetail