2

我正在尝试使用 :nth-child(5); 在背景上拉伸图像以进行第三次打印。但它没有抓住它。难道我做错了什么？

table#OppPracticeOverview tr th {
    padding:5px !important;
    background-color:transparent;
}
table#OppPracticeOverview tr th img {
    width:47px;
    height:22px;
    float:left;
    margin:-5px 0 0 -42px;
    position:absolute;
    z-index:-1;
}
table#OppPracticeOverview tr th img:nth-child(5) {
    width:110px;
    height:22px;
    float:left;
    margin:-5px 0 0 -105px;
    position:absolute;
    z-index:-1;
}

HTML：

<table id="OppPracticeOverview">
<tbody>
    <tr>
        <th>
            Patients
            <img src="/images/img-CCCCCC.png">
       </th>
       <td>
       <th>
           On Hold
           <img src="/images/img-CCCCCC.png">
        </th>
        <td>
        <th>
           Reattribution Request
          <img src="/images/img-CCCCCC.png">
       </th>
       <td>
   </tr>
</tbody>

4

5 回答 5

3

你几乎是对的，只需将nth-childfrom移动img到th这样的位置：table#OppPracticeOverview tr th:nth-child(5) img

演示：http: //jsfiddle.net/G79X9/1/

于 2013-04-08T14:21:12.427 回答
1

它是相对于它的父母的第 n 个孩子。所以你说的是“第五个img它的父母th”。您的 html 很混乱（如错误），但我认为您应该尝试定位th。

于 2013-04-08T14:19:27.923 回答
0

我不工作，因为你们th都没有 5 张图片。我想你想要

table#OppPracticeOverview tr th:nth-child(5) img {...}
于 2013-04-08T14:20:51.893 回答
0

就我而言，我犯了一个小错误

.someclassA .someclassB: nth-child(odd){

如上所示，someclassB: 和 nth-child 之间有一个空格。就是这样..通过删除它开始工作的空间:)

于 2014-01-05T15:06:12.153 回答
0

有时 nth-child 不起作用试试这个 nth-of-type()

table#OppPracticeOverview tr th:nth-of-type(5) img

这对我有用

于 2017-05-24T12:30:56.930 回答