CSS：最后一个孩子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3894839/
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
CSS :last-child
提问by medk
I have a div#contentwith many div.iteminside it.
When using :last-childto make the last div.itemwith no border-bottom, it's OK.
But, as the content is dynamically appended using php and mysql results I'm using a conditional pagination table that will be appended after the last div.itemwhich means at the bottom of the div#content. Here will be the problem as the CSS :last-childwill not recognize the last div.itemas the last-child.
my CSS looks like:
我有一个里面div#content有很多div.item。当使用no:last-child来制作最后一个div.item时border-bottom，没关系。但是，由于内容是使用 php 和 mysql 结果动态附加的，我使用的是条件分页表，该表将附加在最后一个之后，div.item这意味着在div#content. 这将是问题，因为 CSS:last-child不会将 last 识别div.item为 last-child。我的 CSS 看起来像：
div#content div.item:last-child {
border-bottom: none;
}
as you can see I'm defining that the last child id such a div.item
正如你所看到的，我定义了最后一个孩子的 id 这样的 div.item
Any suggestions please. thanks in advance.
请提出任何建议。提前致谢。
!!!!! Please note that the problem is not in the fact that the content is dynamic but in the fact that the CSS :last-child doesn't recognize the div.item as the last child but the last element in the div#content despite telling the CSS that it's:
!!!!!! 请注意，问题不在于内容是动态的，而在于 CSS :last-child 不将 div.item 识别为最后一个子项，而是 div#content 中的最后一个元素，尽管告诉CSS，它是：
div#content div.item:last-child
回答by BoltClock
One possibilityI can think of is that you're appending elements that aren't <div>s and/or don't have the itemclass. Check the output of your PHP/MySQL script and see if there are any non-div.itemelements beside (in DOM terms) the div.itemelements.
我能想到的一种可能性是您附加了不是<div>s 和/或没有item类的元素。检查您的 PHP/MySQL 脚本的输出并查看div.item元素旁边（在 DOM 术语中）是否有任何非div.item元素。
Such elements will not match the selector:
此类元素将与选择器不匹配：
div#content div.item:last-child
That selector finds only <div>s with itemclass, that are the last child of div#content.
该选择器仅找到<div>具有item类的s ，即 的最后一个子代div#content。
Here's an example.
这是一个例子。
Before appending
追加前
<div id="content">
<div class="item"></div> <!-- [1] Selected -->
</div>
After appending
追加后
<div id="content">
<div class="item"></div> <!-- [2] Not selected -->
<div></div> <!-- [3] Not selected -->
</div>
What's being selected, what's not, and why?
什么被选中，什么没有，为什么？
Selected
This<div>element has theitemclass, and it's the last child ofdiv#content.It exactly matches the above selector.
Not selected
This<div>element has theitemclass, but is notthe last child ofdiv#content.It doesn't exactly match the above selector; however, it can possibly match either one of these selectors:
/* Any div.item inside div#content */ div#content div.item /* The last div.item child of its parent only */ div#content div.item:last-of-typeNot selected
Although this<div>element is the last child, it does nothave theitemclass.It doesn't exactly match the above selector; however, it can possibly match this:
/* Any div that happens to be the last child of its parent */ div#content div:last-child
Selected
这个<div>元素有item类，它是 的最后一个子元素div#content。它与上面的选择器完全匹配。
未选中
此<div>元素具有item类，但不是的最后一个子元素div#content。它与上面的选择器不完全匹配；但是，它可能匹配以下任一选择器：
/* Any div.item inside div#content */ div#content div.item /* The last div.item child of its parent only */ div#content div.item:last-of-type未选择
虽然这个<div>元素是最后一个孩子，它并没有具备item一流的。它与上面的选择器不完全匹配；但是，它可能与此匹配：
/* Any div that happens to be the last child of its parent */ div#content div:last-child
回答by Dave
It seems appending items dinamically does not make the layout engine re-run some CSS rules like :last-child.
似乎以动态方式附加项目不会使布局引擎重新运行一些 CSS 规则，例如 :last-child。
I think you can re-read/reload CSS file making the rule apply. Don't know, it's a guess.
我认为您可以重新读取/重新加载 CSS 文件使规则适用。不知道，是猜测。
Another possibility is dinamically set the styles.
另一种可能性是动态设置样式。
EDIT: It seems you have a CSS x Browser problem.
编辑：您似乎有 CSS x 浏览器问题。
Check this out: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Selectors
看看这个：http: //en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Selectors
回答by Moin Zaman
you could use javascript to refresh the CSS only. See here: http://paulirish.com/2008/how-to-iterate-quickly-when-debugging-css/
您只能使用 javascript 来刷新 CSS。见这里：http: //paulirish.com/2008/how-to-iterate-quickly-when-debugging-css/
Another approach would be to use a library like jQuery and fire this line of script every time you add new divs. (or maybe you're using another js library, as you say that you are dynamically adding divs to the page)
另一种方法是使用像 jQuery 这样的库，并在每次添加新 div 时触发这行脚本。（或者也许您正在使用另一个 js 库，正如您所说，您正在向页面动态添加 div）
$('div#content div.item:last-child').css('borderBottom','none');
you might need to reset borders before you do the above though. i.e. the previous 'last' div may still not have the border bottom. so reset all borders then fire the script to remove the border for the last one.
在执行上述操作之前，您可能需要重置边框。即前一个“最后一个”div 可能仍然没有边框底部。因此重置所有边框然后触发脚本以删除最后一个边框。
