IE8 的第一个孩子和最后一个孩子

2022-01-10 00:00:00 css-selectors css internet-explorer-8

我有一些 css 用于调整我的表格中的东西.

I have some css for adjusting things in my table.

这里是:

.editor td:first-child
{
    width: 150px; 
}

.editor td:last-child input,
.editor td:last-child textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

它适用于 Firefox、Safari 和 Chrome，但不适用于(目前)IE8.

It works with Firefox, Safari and Chrome but not (at this time) with IE8.

我知道问题来自第一个孩子和最后一个孩子，但我不是专家.

I know the problem comes from the first-child and last-child but I'm not an expert.

知道如何解决吗?

PS:我在我的 html 文档顶部添加了 <!doctype html> 但没有任何改变.

PS: I added <!doctype html> on top of my html document but nothing changed.

推荐答案

如果你的表只有 2 列，你可以很容易地使用相邻的兄弟选择器到达第二个 td，IE8 确实支持连同 :first-child:

If your table is only 2 columns across, you can easily reach the second td with the adjacent sibling selector, which IE8 does support along with :first-child:

.editor td:first-child
{
    width: 150px; 
}

.editor td:first-child + td input,
.editor td:first-child + td textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

否则，您将不得不使用像 jQuery 这样的 JS 选择器库，或者手动将类添加到最后一个 td，James Allardice 建议.

Otherwise, you'll have to use a JS selector library like jQuery, or manually add a class to the last td, as suggested by James Allardice.

相关文章