在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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/544731.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux/unix 段错误捕获【续】

本文为“在C/C中捕获段错误&#xff0c;打印出错的具体位置”的续篇&#xff0c;进一步解决涉及动态链接库的情况。背景知识&#xff1a;linux/unix下动态链接库的基本原理/proc/pid/maps文件的基本格式动态链接库&#xff1a;在进程执行过程中动态加载&#xff0c;进程间可以共…

Spring为什么建议构造器注入?

来源 | juejin.cn/post/6844904056230690824作者 | Richard_Yi本文的内容主要是想探讨我们在进行 Spring 开发过程当中&#xff0c;关于依赖注入的几个知识点&#xff0c;具体内容如下&#xff1a;Autowired, Resource, Inject 三个注解的区别当你在使用Autowired时&#xff0…

一文玩转 EhCache 缓存框架!

Ehcache 介绍EhCache 从 Hibernate 发展而来&#xff0c;是一个纯Java的进程内缓存框架&#xff0c;具有快速、精干等特点。Ehcache是一种广泛使用的开源Java分布式缓存。主要面向通用缓存&#xff0c;Java EE和轻量级容器。它具有内存和磁盘存储&#xff0c;缓存加载器&#x…

avr uart打印_AVR | 在16x2 LCD上打印HELLO WORLD

avr uart打印We would learn the connection to the LCD first as the connections is a bit complex and here we are using an 8-bit LCD. 我们将首先学习到LCD的连接&#xff0c;因为连接有点复杂&#xff0c;这里我们使用的是8位LCD 。 Simulation 模拟 Explanation 说明…

linux中lvm的缩减

问题提出&#xff1a;服务器硬盘做成了lvm&#xff0c;但是/home目录空间较大&#xff0c;于是想缩减一下&#xff0c;分配给其他目录。实验环境&#xff1a;操作系统&#xff1a;redhat企业版&#xff0c;硬盘已经做成了lvm。问题解决&#xff1a;操作前的注意事项&#xff1a…

SpringBoot 过滤器、拦截器、监听器对比及使用场景!

来源 | blog.csdn.net/qq_38020915/article/details/116431612作者 | dingwen_blog一、关系图理解二、区别1.过滤器过滤器是在web应用启动的时候初始化一次, 在web应用停止的时候销毁可以对请求的URL进行过滤, 对敏感词过滤挡在拦截器的外层实现的是 javax.servlet.Filter 接口…

Jenkins Build Radiators(构建发射源)

为什么80%的码农都做不了架构师&#xff1f;>>> information radiators&#xff08;信息发射源&#xff09;的概念通常被用在敏捷的圈子里。 据敏捷专家Alistair Cockburn所说&#xff1a; 一个信息发射源是一个贴在一个地方的显示器&#xff0c;当人们工作或路过时…

线程池是如何重复利用空闲的线程来执行任务的?

来源&#xff1a;blog.csdn.net/anhenzhufeng/article/details/88870374在Java开发中&#xff0c;经常需要创建线程去执行一些任务&#xff0c;实现起来也非常方便&#xff0c;但如果并发的线程数量很多&#xff0c;并且每个线程都是执行一个时间很短的任务就结束了&#xff0c…

C# 将程序添加开机启动的三种方式

前言 最近在研究程序随系统启动&#xff0c;发现在 win7 上因为权限的问题&#xff0c;写注册表的时候总是会出现问题&#xff0c;写不进去导致的不能自动启动&#xff0c;随后决定仔细的看一看这方面的问题。 查资料过程中主要发现有三种方式可以添加到启动&#xff0c;分别…

SpringBoot 中的 3 种条件装配!

一、介绍在实际的项目开发中&#xff0c;我们往往需要根据不同的环境做出不同的配置&#xff0c;例如&#xff1a;在开发环境下&#xff0c;我们会使用内存数据库以便快速启动服务并进行开发调试&#xff0c;在test环境、生产环境&#xff0c;会使用对应环境的数据库。如果我们…

图说 mysql 事务隔离级别

转载于:https://blog.51cto.com/kingbox/1657916

@Autowired报错的4种解决方案和原因分析!

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;上图的报错信息相信大部分程序员都遇到过&#xff0c;奇怪的是虽然代码报错&#xff0c;但丝毫不影响程序的正常执行&#x…

C# Winform 窗体美化(一、IrisSkin 换肤库)

IrisSkin 换肤库 IrisSkin 是为Microsoft Visual Studio dotNET开发的最易用的界面增强dotNET(WinForm)组件包。能完全自动的为应用程序添加支持换肤功能。[百度百科] 1、文件 IrisSkin4.dll - 544 KB各种 .ssk 格式的皮肤文件&#xff08;一般在网上搜的是13个皮肤的压缩包…

厉害了,Spring中bean的12种定义方法!

前言在庞大的java体系中&#xff0c;spring有着举足轻重的地位&#xff0c;它给每位开发者带来了极大的便利和惊喜。我们都知道spring是创建和管理bean的工厂&#xff0c;它提供了多种定义bean的方式&#xff0c;能够满足我们日常工作中的多种业务场景。那么问题来了&#xff0…

C# Winform 窗体美化(二、LayeredSkin 界面库)

二、LayeredSkin 界面库 概况 这部分资源是 Winform 美化最多的了&#xff0c;效果还不错&#xff0c;使用时只需引入 LayeredSkin.dll - 696 KB 即可。 网上能找到的最后 LayeredSkin 版本应该是 LayeredSkin Demo2014-12-10.zip&#xff0c;之后作者就整合成一个更加强大的…

【WebSocket初探 】

众所周知&#xff0c;socket是编写网络通信应用的基本技术&#xff0c;网络数据交换大多直接或间接通过socket进行。对于直接使用socket的client与服务端&#xff0c;一旦连接被建立则均可主动向对方传送数据&#xff0c;而对于使用更上层的HTTP/HTTPS协议的应用&#xff0c;因…

Spring Cache 实战:兼容所有缓存中间件!

作者 | 悟空聊架构来源 | 悟空聊架构&#xff08;ID&#xff1a;PassJava666&#xff09;本篇给大家介绍一种兼容所有缓存中间件的方案&#xff0c;不论我们是使用 Redis 还是 Ehcache&#xff0c;都不需要关心如何操作 Redis 或者 Ehcache&#xff0c;这套方案统统帮你搞定。这…

C# Winform 窗体美化(三、不规则窗体)

三、不规则窗体 概况 之前学习的 LayeredSkin 看到里面有个异形窗口&#xff0c;比较感兴趣&#xff0c;所以就找一下资料研究一下。不规则窗体学习有一个比较好的例子&#xff0c;叫 GoldFishProject&#xff0c;是一条鱼金鱼在屏幕上游。 不规则窗口示例代码 GoldFishProj…

Mybatis中SQL注入攻击的3种方式,真是防不胜防!

作者 | sunnyf来源 | https://www.freebuf.com/vuls/240578.html前言SQL注入漏洞作为WEB安全的最常见的漏洞之一&#xff0c;在java中随着预编译与各种ORM框架的使用&#xff0c;注入问题也越来越少。新手代码审计者往往对Java Web应用的多个框架组合而心生畏惧&#xff0c;不知…

Hadoop源代码分析(MapReduce概论)

大家都熟悉文件系统&#xff0c;在对HDFS进行分析前&#xff0c;我们并没有花很多的时间去介绍HDFS的背景&#xff0c;毕竟大家对文件系统的还是有一定的理解的&#xff0c;而且也有很好的文档。在分析Hadoop的MapReduce部分前&#xff0c;我们还是先了解系统是如何工作的&…