我需要选择（不是最后一个孩子），只有当它有特定的类

我有以下代码：我需要选择（不是最后一个孩子），只有当它有特定的类

<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>

我需要什么：

填充左添加到锚带班即开始行动，而不是最后一个孩子

选择锚（不是最后一个）工作原理：

a:not(:last-child) { 
    padding-right: 5px; }

ŧ RY获得也是类不起作用

a[class^=action--]:not(:last-child) { 
     padding-right: 5px; }

或

a:not(:last-child) [class^=action--] { 
     padding-right: 5px; }

来源

2017-12-18 user3541631

'一个[^类=行动 - ]：不是（：最后一个孩子）'应该工作。您的问题陈述不符合您实际需要的内容，或者您的HTML没有。还要记住，默认情况下，元素是内联的，并且填充对内联元素的作用不同。确保你的元素是显示：块。 – BoltClock

代替将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>

对Adjacent Sibling Selector 读操作，+意味着“紧随其后每隔a[class^=action--]后a：所以它适用于所有图标，第一个除外

来源

2017-12-18 09:46:40

但他说**不是最后一个孩子** ..除第一个以外 –

@TemaniAfif，除了最后一个以外，你可以对所有的东西都应用'padding-right'，*或者*应用'padding-left'除外第一个。结果看起来是一样的，第二个选项更直观，更易于阅读。 –

啊！所以你应该说:)因为我没有支付意向的CSS但只有选择器;） –

-2

看着CSS选择一类属性的定义W3，你应该把你正在试图引号从而匹配字符串...

a[class^="action--"]:not(:last-child) { 
     padding-right: 5px; }

仅供参考，请参阅此页...... https://www.w3schools.com/cssref/sel_attr_begin.asp

来源

2017-12-18 09:48:06 PillHead

这似乎并没有排除最后的锚虽然。 –

你不需要报价。 – BoltClock

指定选择的范围应如下所示：

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>

来源

2017-12-18 09:51:38 UncaughtTypeError

我认为更好的添加一些真实的图标或文字，并使用视觉属性，以便我们可以看到结果immedialty;） –

提问者说这不起作用，所以我在想这个问题有什么问题。 – BoltClock

谢谢你指出@BoltClock。 OP可能会遇到这个问题，因为所讨论的元素*实际上并不是最后发生的实例，在这种情况下，点＃3仍然适用。我现在将在此保存答案，等待OP对此的确认。 – UncaughtTypeError

-2

你不能有两个伪选择两个:not和:last-child只有这样你就不能使用这两者的伪选择。
相反，你可以使用这样
a[class^=action--]{ padding-left: 5px; }
a[class^=action--]:last-child{
padding-left:initial;
}

来源

2017-12-18 09:51:44

检查其他答案;） –

你*可以*有两个伪，你当然*可以*有另一个伪：not（）。谁告诉你，否则只是补充。 – BoltClock

我需要选择（不是最后一个孩子），只有当它有特定的类

回答

相关问题