css中的第一个可见td和最后一个可见td

我正在尝试在tr中设计第一个和最后一个可见的td。 我可以通过jquery的peice实现上述目标，但在我的情况下，需要处理许多场景，测试将需要时间

经过大量的研究，我在css中找不到任何东西

有没有其他简单的黑客或工作，使我只能用css

下面是我尝试过的几个选项

。可见{
显示：块；
}
.隐藏{
显示：无；
}
td：第一个孩子{
}
td：最后一个孩子{
}
td.可见：第一个孩子{
}
td.可见：最后一个孩子{
}

css中没有向后移动，因此我们不能使用纯css选择类

cant

。隐藏{
可见性：隐藏；
}
.不能{
背景色：橙色！重要；
}
tr td.hidden+td:not（.hidden），tr td:not（.hidden）：第一个子项{
背景色：红色；
}
tr td.hidden+td:not（.hidden）~td，tr td:not（.hidden）：第一个子项~td{
背景色：未设置；
}
tr td:not（.hidden）：最后一个子，tr td:not（.hidden）：最后一个子{
背景色：红色！重要；
}

这是TR1\U TD1
这是TR1_TD2
这是TR1\U TD3
这是TR1_TD4
这是TR1_TD5
这是TR2-TD1
这是TR2-TD2
这是TR2-TD3
不能使用纯Css
这是TR2-TD5

css中没有向后移动，因此我们不能使用纯css选择类

cant

。隐藏{
可见性：隐藏；
}
.不能{
背景色：橙色！重要；
}
tr td.hidden+td:not（.hidden），tr td:not（.hidden）：第一个子项{
背景色：红色；
}
tr td.hidden+td:not（.hidden）~td，tr td:not（.hidden）：第一个子项~td{
背景色：未设置；
}
tr td:not（.hidden）：最后一个子，tr td:not（.hidden）：最后一个子{
背景色：红色！重要；
}

这是TR1\U TD1
这是TR1_TD2
这是TR1\U TD3
这是TR1_TD4
这是TR1_TD5
这是TR2-TD1
这是TR2-TD2
这是TR2-TD3
不能使用纯Css
这是TR2-TD5

我不完全确定这是否是您所要求的，但以下是我如何处理的解决方案：

加载文档时，使用jQuery向所有要处理的元素添加一个类

$(document).ready(function(){
   $("elements to select").addClass("selected"); // to all the elements you 
     want to handle
});

然后在css中，只需使用该类编辑选定的元素

.selected{
 // your code
}

---

我不完全确定这是否是您所要求的，但以下是我如何处理它的解决方案：

加载文档时，使用jQuery向所有要处理的元素添加一个类

$(document).ready(function(){
   $("elements to select").addClass("selected"); // to all the elements you 
     want to handle
});

然后在css中，只需使用该类编辑选定的元素

.selected{
 // your code
}

这些东西会为你工作，我希望你会很高兴看到它。 您只能看到第一个TD，而最后一个TD是可见的，其他TD是隐藏的

表格{
边框：1px实心#ddd；
}
//tr td{
//显示：无；//用于隐藏其他TD
//}
tr td：第一个孩子{
颜色：深绿色；
显示：块；
背景：浅绿色；
填充：7px 15px；
右边框：2倍纯红；
}
tr td：最后一个孩子{
颜色：天蓝色；
显示：块；
填充：7px 15px；
背景：蓝色；
右边框：2倍纯红；
}

这是第一个孩子
这是2
这是3
这是最后一个孩子
一
二
三
四
五

这些东西会为你工作，我希望你会很高兴看到它。 您只能看到第一个TD，而最后一个TD是可见的，其他TD是隐藏的

表格{
边框：1px实心#ddd；
}
//tr td{
//显示：无；//用于隐藏其他TD
//}
tr td：第一个孩子{
颜色：深绿色；
显示：块；
背景：浅绿色；
填充：7px 15px；
右边框：2倍纯红；
}
tr td：最后一个孩子{
颜色：天蓝色；
显示：块；
填充：7px 15px；
背景：蓝色；
右边框：2倍纯红；
}

这是第一个孩子
这是2
这是3
这是最后一个孩子
一
二
三
四
五

如果我理解正确，我会说如果您的标记在使用javascript的浏览器执行时是动态的，那么使用纯CSS是无法实现这一点的

如果您可以控制它的生成过程，并且您的标记在服务器执行时是动态的（PHP、Java等等），那么您可以再添加两个类，.first-visible和.last-visible给适当的元素，并在CSS中设置它们的样式

CSS4添加了必要的功能以实现这一点，但其支持功能尚未定义：

---

你能添加纯javascript而不是jQuery吗？

如果我理解正确，我会说如果你的标记在浏览器执行时是动态的，那么使用纯CSS是无法实现的

如果您可以控制它的生成过程，并且您的标记在服务器执行时是动态的（PHP、Java等等），那么您可以再添加两个类，.first-visible和.last-visible给适当的元素，并在CSS中设置它们的样式

CSS4添加了必要的功能以实现这一点，但其支持功能尚未定义：

---

您是否能够添加纯javascript而不是jQuery？

适当的CSS选择器取决于HTML，您尚未显示该HTML；请记住分享你的代码。你的代码正在运行。。。我不知道你在哪里stuck@DavidJorHpan只有当所有td都可见时，我的代码才能完美地工作。如果我隐藏最后一列，样式应该应用到可见的最后一列。相应的CSS选择器取决于HTML，您还没有显示它；请记住分享你的代码。你的代码正在运行。。。我不知道你在哪里stuck@DavidJorHpan只有当所有td都可见时，我的代码才能完美地工作。如果我隐藏最后一列，样式应该应用于可见的最后一列，而不使用jqueryneed而不使用jqueryyou错误地理解了这个问题。如果隐藏最后一列，则应应用该最后一列样式中现在可见的内容。（隐藏网格中的列，始终对最后一列应用某些样式）您希望对第一列和最后一列执行什么操作？现在您可以看到了