在CSS中使用not:first-child选择器

Introduction:

介绍:

Well, selectors are a very common term to deal with while we are developing a website or web page. You might know quite a few of them and might as well be implementing them. You might also have noticed that all the selectors are used for selecting some element or other, well that's their entire purpose and thus the name selectors. Although all the selectors share common characteristics but not all of them are the same. Their behaviors differ to a very great extent and one can only know after practical implementation. So, since we are discussing selectors, why don't we talk about one very specific selector? Although you might have come across this selector at some point of your time. The selector we will be focused on is not:first-child selector. To know more about this selector just keep reading on!

好吧,在我们开发网站或网页时,选择器是一个很常见的术语。 您可能知道很多,也可能正在实施它们。 您可能还已经注意到,所有选择器都用于选择某些元素或其他元素,这就是它们的全部用途,因此也就是名称选择器。 尽管所有选择器都具有共同的特征,但并非所有选择器都相同。 它们的行为差异很大,只有在实际实施后才能知道。 因此,既然我们正在讨论选择器,为什么不谈论一个非常具体的选择器呢? 尽管您可能在某个时候遇到了此选择器。 我们将关注的选择器不是:first-child选择器 。 要了解有关此选择器的更多信息,请继续阅读!

Well, the name sounds a bit weird, doesn't it? Not: first child. So, that brings us to the question of what does this selector does and how is this selector different from other selectors. Well, the functioning and behavior of this selector are not very tough to understand and you can easily figure out from the name itself that for what purpose this selector is put to use. So let us look at a more formal definition of this selector so that we get a better gist of it.

好吧,这个名字听起来有些怪异,不是吗? 不:第一个孩子。 因此,这就引出了这个选择器的作用以及该选择器与其他选择器有何不同的问题。 好吧,这个选择器的功能和行为并不是很难理解的,您可以很容易地从名称本身中得知该选择器用于什么目的。 因此,让我们看一下这个选择器的更正式定义,以便我们更好地了解它。

Definition:

定义:

The not:first-child selector as the name suggests is used to select every element which is not the first child element of it's deriving parent element. Pretty simple right? The selector is not used for choosing the first child of its parent element. This selector is usually represented as an argument and it is seen in the form of not(first-child). To help you understand this in a better way, why don't you go ahead and have a look at the syntax below,

顾名思义, not:first-child选择器用于选择不是其派生父元素的第一个子元素的每个元素。 很简单吧? 选择器不用于选择其父元素的第一个子元素。 该选择器通常表示为一个参数,并且以not(first-child)的形式出现。 为了帮助您更好地理解这一点,为什么不继续阅读下面的语法,

    :not(element){
        //some CSS property
    }

Example:

例:

Using a not:first-child selector in CSS

In the above example the div element contains <ul> elements, so it selects all child elements of <div> tag except its first-child and applies the CSS styles.

在上面的示例中,div元素包含<ul>元素,因此它将选择<div>标记的所有子元素(第一个孩子除外)并应用CSS样式。

Piece of advice:

一点建议:

Now, it is time to make use of your new-found knowledge. But before you get on with that make sure you use this selector properly wherever required because you don't want your code to get ruined just because of a silly mistake right? Not just this one you must use every selector wisely to make your website or web page responsive and whenever in doubt, you will always have this article for your reference. Also, if you have some issues with our code and practice, we are always available to help you at https://ask.includehelp.com/.

现在,该利用您新发现的知识了。 但是在继续之前,请确保在所需的任何地方正确使用此选择器,因为您不希望仅仅因为一个愚蠢的错误而导致代码被破坏吗? 您不仅必须明智地使用每个选择器,以使您的网站或网页具有响应能力,而且如有疑问,您将始终可以将本文作为参考。 另外,如果您对我们的代码和实践有任何疑问,请访问https://ask.includehelp.com/随时可以为您提供帮助。

翻译自: https://www.includehelp.com/code-snippets/using-a-not-first-child-selector-in-css.aspx

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
:first-child和:first-of-type是CSS选择器的两个不同的选择器。 :first-child选择器匹配其父元素的第一个子元素。例如,如果我们有以下CSS代码: p:first-child { background-color: yellow; } span:first-child { background-color: yellow; } 那么它将选择所有p元素和span元素的第一个子元素,并将其背景颜色设置为黄色。\[1\] :first-of-type选择器匹配其父级是特定类型的第一个子元素。例如,如果我们有以下CSS代码: p:first-of-type { color: blue; } 那么它将选择所有p元素的第一个子元素,并将其字体颜色设置为蓝色。注意,这里的:first-of-type只要是该类型元素的第一个就行了,不要求是第一个子元素了。\[2\] 所以,两个选择器的区别在于:first-child选择器只匹配其父元素的第一个子元素,而:first-of-type选择器匹配其父级是特定类型的第一个子元素。 #### 引用[.reference_title] - *1* [css:first-child和first-of-type](https://blog.csdn.net/xiaojinguniang/article/details/119887850)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [:first-child和:first-of-type的区别](https://blog.csdn.net/weixin_46305214/article/details/104644576)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [CSS选择器 :first-of-type/:last-of-type/ :first-child/:last-child 用法](https://blog.csdn.net/momo_mom177/article/details/124008659)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值