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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

代替将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：所以它适用于所有图标，第一个除外

回答：

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

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

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

回答：

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

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>

回答：

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

以上是 我需要选择（不是最后一个孩子），只有当它有特定的类 的全部内容， 来源链接： utcz.com/qa/262141.html

回到顶部