CSS | :not(:last-child):after 选择器

我们在前端web开发中经常遇到这样的情况，HTML中有很多元素，我们需要给最后一个元素或除最后一个元素之外的每个元素或基本上给那个无法选择的元素一个特定的样式直接地。出现了伪选择器的使用。

这篇文章解释了:not(:last-child):after选择器。此选择器不会选择最后一个子元素之后的元素。它主要用于在除最后一个子元素之外的每个子元素之后添加内容。

示例 1：此示例创建一个简单的 div 元素。它不使用 :not(:last-child):after 选择器。

输出：

示例 2：将伪选择器 :not(:last-child):after 应用于上述示例之后。

输出：

解释：

• .div .inner-div：选择所有类为 ‘inner-div’ 的元素在类为 ‘div’ 的元素中。在这里，所有三个 div 的类都为“div”，两个子 div 的类为“inner-div”。它选择类名称为“inner-div”的所有六个 div 元素。
• :not(:last-child)
  • :not() 选择器从选择中排除传递给它的元素。
  • :last-child 选择器选择最后一个孩子。
  • 结合上面的这两个选择器，从选择中排除每个父 div 的最后一个子元素(内部 div)。

  它选择三个内部 div 类元素或每个第一个内部 div 元素。

• :after这是一个很好的选择器，用于在所选元素之后添加内容(有时，甚至是块级元素)(这里是每组内部 div 中的第一个内部 div)。因此，“不在底部 div 中”的内容确实只添加在顶部 div 中而不是底部 div 中。

示例 3：

  

    

  

      
    
GeeksforGeeks
      
    
CSS :not(:last-child):after Selector
      
    
GeeksforGeeks Subjects
      
    

        
Data Structure
        
Algorithm
        
HTML
        
CSS
        
JavaScript
    

输出：