Fatal编程技术网
  • css/
  • 具有类的第一个元素的CSS选择器

具有类的第一个元素的CSS选择器

css

具有类的第一个元素的CSS选择器,css,css-selectors,Css,Css Selectors,我有一堆元素的类名为red，但我似乎无法使用以下CSS规则选择第一个元素的类名为class=“red”： .home.red：第一个孩子{ 边框：1px纯红； } 废话 首先 秒 第三 第四 如名称所示，:first child选择器用于选择父标记的第一个子标记。因此，此示例将起作用（只需尝试）： 首先 第二 但是，如果您将标记嵌套在不同的父标记下，或者如果您的classred标记不是父标记下的第一个标记，那么这将不起作用 还要注意，这不仅适用于整个文档中的第一个这样的标记，而且每次都有

我有一堆元素的类名为
red
，但我似乎无法使用以下CSS规则选择第一个元素的类名为
class=“red”
：

.home.red：第一个孩子{
边框：1px纯红；
}

废话

首先


秒

第三

第四
如名称所示，
:first child
选择器用于选择父标记的第一个子标记。因此，此示例将起作用（只需尝试）：



首先

第二
但是，如果您将标记嵌套在不同的父标记下，或者如果您的class
red
标记不是父标记下的第一个标记，那么这将不起作用

还要注意，这不仅适用于整个文档中的第一个这样的标记，而且每次都有一个新的父标记围绕它，如：



首先

第二
第三

第四

第一个
和
第三个
随后将为红色

对于您的情况，您可以使用类型的第n个选择器：

.red:nth类型（1）
{
边框：5px纯红；
}

废话

首先


秒

第三

第四
如名称所示，
:first child
选择器用于选择父标记的第一个子标记。因此，此示例将起作用（只需尝试）：



首先

第二
但是，如果您将标记嵌套在不同的父标记下，或者如果您的class
red
标记不是父标记下的第一个标记，那么这将不起作用

还要注意，这不仅适用于整个文档中的第一个这样的标记，而且每次都有一个新的父标记围绕它，如：



首先

第二
第三

第四

第一个
和
第三个
随后将为红色

对于您的情况，您可以使用类型的第n个选择器：

.red:nth类型（1）
{
边框：5px纯红；
}

废话

首先


秒

第三

第四
要与选择器匹配，元素必须具有
红色的类名，并且必须是其父元素的第一个子元素



废话


废话



要与选择器匹配，元素必须具有
红色的类名，并且必须是其父元素的第一个子元素



废话


废话



既然其他答案涵盖了它的问题所在，我将尝试另一半，即如何修复它。不幸的是，我不知道你这里有一个CSS-only解决方案，至少我想不出来。不过，还有其他一些选择


  • 生成元素时，将
    第一个
    类指定给该元素，如下所示：
    

    .red:first-of-type {
    border: 5px solid red;
}

    

    

    
CSS:
    

    .first.red{
边框：5px纯红；
}

    
此CSS仅匹配具有两个
    第一类
    和
    红色
    类的元素
    • 

  • 或者，也可以在JavaScript中执行相同的操作，例如，使用与上面相同的CSS，jQuery可以执行以下操作：
    

    $(".red:first").addClass("first");

    

    • 

    既然其他答案涵盖了问题所在，我将尝试另一半，即如何解决问题。不幸的是，我不知道你这里有一个CSS-only解决方案，至少我想不出来。不过，还有其他一些选择
    

  • 生成元素时，将
    第一个
    类指定给该元素，如下所示：
    

    .red:first-of-type {
    border: 5px solid red;
}

    

    

    
CSS:
    

    .first.red{
边框：5px纯红；
}

    
此CSS仅匹配具有两个
    第一类
    和
    红色
    类的元素
    • 

  • 或者，也可以在JavaScript中执行相同的操作，例如，使用与上面相同的CSS，jQuery可以执行以下操作：
    

    $(".red:first").addClass("first");

    

    • 

    这是作者误解第一个孩子如何工作的最著名的例子之一，
    ：first child
    伪类表示父类的第一个子类。就这样。有一个非常常见的误解，即它会选择第一个匹配复合选择器其余部分指定的条件的子元素。由于选择器的工作方式（请参阅以获取解释），这根本不是事实
    
，表示其元素类型的同级元素中的第一个元素。用插图说明
    ：第一个孩子
    和
    ：第一个类型
    之间的区别。但是，与
    ：first child
    一样，它不查看任何其他条件或属性。在HTML中，元素类型由标记名表示。在问题中，该类型是
    p
    
不幸的是，没有类似的
    ：类的第一个
    伪类来匹配给定类的第一个子元素。当这个答案第一次发布时，它是围绕现有的选择器机制设计的，正如我在第一段中提到的，通过添加选择器列表参数，您可以提供复合选择器的其余部分，以获得所需的过滤行为。近年来，随着选择器列表作为可选的第二个参数出现，该功能被用来简化事情，并避免在整个文档中出现
    ：nth-match（）
    匹配的错误印象（参见下面的最后一个注释）
    
在我们等待的时候（说真的，已经将近10年了，在过去的5年里只有一个实现），我和我开发了一个解决方案

    <div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

    

    .home span + .red{
      border:3px solid green;
    }

    

    <aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>

    

     .home > span + .red{
      border:1px solid red;
    }

    

    .class:first-of-type { }

    

    .home p:first-of-type

    

    .red:first-of-type {
    border: 5px solid red;
}

    

    .red:last-of-type {
    border: 5px solid red;
}

    

    .home > .red:first-child {
    /* put your styling here */
}