我需要选择（不是最后一个孩子）只有它有一个特定的类
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我需要选择（不是最后一个孩子）只有它有一个特定的类相关的知识，希望对你有一定的参考价值。
我有以下代码：
<td><img src="img/product.jpg" height="40" width="40"/></td>
<td>Triple monochromator for Raman</td>
<td><a href="i"></a></td>
<td>
<a class="action--edit"><i class="icon-building"></i></a>
<a class="action--delete"><i class="icon-building"></i></a>
<a class="action--view"><i class="icon-building"></i></a>
</td>
我需要的：
将padding-left添加到锚点，其中一个类以action开头且不是最后一个子节点
选择锚点（不是最后一个）有效：
a:not(:last-child) {
padding-right: 5px; }
试着让班级也行不通
a[class^=action--]:not(:last-child) {
padding-right: 5px; }
要么
a:not(:last-child) [class^=action--] {
padding-right: 5px; }
答案
除了将padding-right应用于除最后一个之外的所有内容之外，您可以将padding-left应用于除第一个之外的所有内容。这将使您的代码更直观，更易于阅读。
看一下这个：
a[class^=action--] + a {
padding-left: 5px;
}
a[class^=action--] + a {
padding-left: 5px;
}<table>
<tr>
<td><img src="http://via.placeholder.com/350x150" height="40" width="40" /></td>
<td>Triple monochromator for Raman</td>
<td>
<a href="i"><img src="http://via.placeholder.com/24x24"/></a>
</td>
<td>
<a class="action--edit"><i class="icon-building"><img src="http://via.placeholder.com/16x16"/></i></a>
<a class="action--delete"><i class="icon-building"><img src="http://via.placeholder.com/16x16"/></i></a>
<a class="action--view"><i class="icon-building"><img src="http://via.placeholder.com/16x16"/></i></a>
</td>
</tr>
</table>另一答案
指定选择器的范围应如下所示：
a[class^="action--"]:not(:last-child) { ... }
- 将属性选择器与插入符号结合使用以指定字符串的开头，
- 然后将
:not()negation伪类选择器与括号之间指定的:last-child伪类选择器链接起来， - 验证要定位的元素实际上是指定元素范围中的最后一个嵌套元素（下面嵌入的代码片段经过调整以证明这一点）
代码片段演示：
a[class^="action--"]:not(:last-child) {
padding-left: 30px;
}<table>
<tr>
<td><img src="img/product.jpg" height="40" width="40" /></td>
<td>Triple monochromator for Raman</td>
<td>
<a href="i"></a>
</td>
<td>
<a class="action--edit"><i class="icon-building">icon "edit"</i></a>
<a class="action--delete"><i class="icon-building">icon "delete"</i></a>
<a class="action--view"><i class="icon-building">icon "view"</i></a>
</td>
</tr>
</table>另一答案
查看类属性的css选择器的w3定义，您应该将您尝试匹配的字符串放在引号中，这样......
a[class^="action--"]:not(:last-child) {
padding-right: 5px; }
请参阅此页面以供参考... https://www.w3schools.com/cssref/sel_attr_begin.asp
另一答案
你不能有两个伪选择器，:not和:last-child都只是伪选择器，所以你不能同时使用它们。
相反，你可以像这样使用
a[class^=action--]{
padding-left: 5px;
}
a[class^=action--]:last-child{
padding-left:initial;
}
以上是关于我需要选择（不是最后一个孩子）只有它有一个特定的类的主要内容，如果未能解决你的问题，请参考以下文章