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添加到一个锚点，该锚点的类以行动开头且不是最后一个孩子

选择锚点（不是最后一个）有效：

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

＆＃13;

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

＆＃13;

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

＆＃13;

在每个+之后阅读Adjacent Sibling Selector ，a表示＆＃34;紧随其后a[class^=action--]：所以它适用于所有图标，但第一个。

Answer 2

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

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

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

代码段示范：

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

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

4 个答案: