css选择器 :nth-of-type(1)、:nth-child(1)、:first-child、 :first-of-type

最近又把css复习了一遍，其中遇到这两个选择器，有时候会弄错，所以今天在深入了解下。

带 “:” 的选择器一般是指定元素具有某种特性。

顾名思义。:nth-child(1) 的1表示第一个元素，child表示这是一个儿子元素，就是第一个儿子元素。例子：

p:nth-child(1)有两个条件要满足，缺一不选：

1、是其父元素的第一个子元素。

2、还要是p元素。

:first-of-type的first表示第一个，type表示类型。例子

p:first-of-type满足一个条件

1、是其父元素的第一个p标签的元素

:nth-of-type(1)其实和:first-of-type一样，都是一样的含义，只是:nth-of-type(1)中的1可以改变成其他的数字以选择其他的兄弟元素。

同上，:nth-child(1)和:first-child一样。只是:nth-child(1)可以改变其数字以选择其他兄弟元素。

css选择器 :nth-of-type(1)、:nth-child(1)、:first-child、 :first-of-type相关推荐

CSS 选择器：BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
最常用的css选择器及兼容性 +几个好用却不多见的 nth-child等
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
CSS选择器学习小结
前言: 半途出家做Front End,以前只是大概知道点,现在就必须从头把css好好看看啦,呜呜~~~~~~ 一.基本选择器序号选择器含义 1. * 通用元素选择器,匹配任何元素 2. E 标签 ...
30个最常用css选择器解析
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
html类选择器使用在什么场景,CSS选择器
**关键字: ** ** 1.css选择器使用场景; ** ** 2.css选择器优先级; ** 3. first-child和:first-of-type 1.class 和 id 的使用场景? c ...
css选择器按功能分,CSS 选择器
概览在 CSS 中,选择器用于选择需要添加样式的元素. CSS 选择器非常丰富,现将 CSS 1 - 3 目前所有的选择器列举如下. 选择器例子例子描述 CSS版本 .class .intro ...
HTML5 CSS选择器总结（强烈推荐）
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
Css学习总结（4）——CSS选择器总结
1:通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样 ...
【重识 HTML + CSS】CSS 选择器
CSS 选择器 selector 元素选择器 (type selectors):div {} 通用选择器 (universal selector):* {} id 选择器 (id selectors) ...
CSS（一）：CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性；CSS选择器；尺寸和颜色单位、背景和文本设置
目录一.CSS 1.1 CSS概述 1.1.1 定义 1.1.2 特征 1.1.3 组织网页的两种常用方式 1.2 引入CSS的四种方式 1.2.1 Style属性方式(内联样式) 1.2.2 St ...

css选择器 :nth-of-type(1)、:nth-child(1)、:first-child、 :first-of-type

p:nth-child(1)有两个条件要满足，缺一不选：

p:first-of-type满足一个条件

css选择器 :nth-of-type(1)、:nth-child(1)、:first-child、 :first-of-type相关推荐

最新文章

热门文章