Html :nth-child() 不工作

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15881468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 07:21:24  来源:igfitidea点击:

:nth-child() not working

htmlcsscss-selectors

提问by Alverto

I am trying to stretch an image on the background for print for the third th with the :nth-child(5); but it does not catch it. Am I doing something wrong?

我正在尝试使用 :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:

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>

回答by Johan

You were almost right, just move the nth-childfrom imgto thlike this: table#OppPracticeOverview tr th:nth-child(5) img

你几乎是对的,只需像这样移动nth-childfromimgthtable#OppPracticeOverview tr th:nth-child(5) img

Demo: http://jsfiddle.net/G79X9/1/

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

回答by Mike Robinson

It's nth-child relative to it's parent. So you're saying "the 5th imgits parent the th". Your html is screwy (as in wrong), but I think you should try targeting the thinstead.

它是相对于它的父母的第 n 个孩子。所以你说的是“第五个img它的父母th”。您的 html 很糟糕(因为错误),但我认为您应该尝试将其th作为目标。

回答by SpliFF

I doesn't work because none of your thhave 5 images. I think you want

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

table#OppPracticeOverview tr th:nth-child(5) img {...}

回答by enRaiser

In my case I made a small mistake

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

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

You can see as above there is one space between someclassB: and nth-child. thats it.. By deleting that space it started working :)

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

回答by Surendra Kumar Ahir

Some time nth-child not work try this nth-of-type()

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

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

this is working for me

这对我有用