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
:nth-child() not working
提问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-child
from img
to th
like this: table#OppPracticeOverview tr th:nth-child(5) img
你几乎是对的,只需像这样移动nth-child
fromimg
到th
:table#OppPracticeOverview tr th:nth-child(5) img
回答by Mike Robinson
It's nth-child relative to it's parent. So you're saying "the 5th img
its parent the th
". Your html is screwy (as in wrong), but I think you should try targeting the th
instead.
它是相对于它的父母的第 n 个孩子。所以你说的是“第五个img
它的父母th
”。您的 html 很糟糕(因为错误),但我认为您应该尝试将其th
作为目标。
回答by SpliFF
I doesn't work because none of your th
have 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
这对我有用