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

Question

我有以下代码：

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

Answer 1

除了将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之后的a[class^=action--]：所以它适用于所有图标，除了第一个。

Answer 2

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

a[class^="action--"]:not(:last-child) { ... }

1. 将属性选择器与插入符号结合使用以指定字符串的开头，
2. 然后将:not() negation伪类选择器与括号之间指定的:last-child伪类选择器链接起来，
3. 验证要定位的元素实际上是指定元素范围中的最后一个嵌套元素（下面嵌入的代码片段经过调整以证明这一点）

代码片段演示：

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>

Answer 3

查看类属性的css选择器的w3定义，您应该将您尝试匹配的字符串放在引号中，这样......

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

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

Answer 4

你不能有两个伪选择器，:not和:last-child都只是伪选择器，所以你不能同时使用它们。 相反，你可以像这样使用

a[class^=action--]{
        padding-left: 5px; 
    }

a[class^=action--]:last-child{ padding-left:initial; }