文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS选择器

:first-child和last-child选择器 :first-child选择器和:last child选择器分别用于为父元素中的第-个或者最后一个子元素设置样式。...:nth-child(n)和nth-last-child(n)选择器 使用:first- child选择器和:last- child选择器可以选择某个父元素中第-一个或最后一个子元素，但是如果用户想要选择第...2个或倒数第2个子元素，这两个选择器就不起作用了。...:nth-of-type(n)和:nth-last-of-type(n)选择器 这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第...n个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素，与元素类型无关。

2.4K11

一个合格的初级前端工程师需要掌握的模块笔记

行内样式，不建议使用 内联式样式表 外联样式表 CSS的继承 CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。...:nth-child(n) 向元素添加样式，且该元素是它的父元素的第 n 个子元素 :nth-last-child(n) 向元素添加样式，且该元素是它的父元素的倒数第 n 个子 元素 :only-child...元素 :nth-of-type(n) 向元素添加样式，且该元素是同级同类型元素中第 n 个元 素 :nth-last-of-type(n) 向元素添加样式，且该元素是同级同类型元素中倒数第...:nth-child 匹配其父元素下的第N个子或奇偶元素 :nth-last-child() 选择所有他们父元素的第n个子元素。...计数从最后一个元素开始到第一个 :nth-last-of-type() 选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个 :nth-of-type() 选择同属于一个父元素之下，并且标签名相同的子元素中的第

3.6K10
您找到你想要的搜索结果了吗？
是的
没有找到

css 总结1 原

一、由link和@import的区别 1、@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等...{font-weight: bold;} （4） first-of-type css选择器中:first-child与:first-of-type的区别 p:first-child 匹配p元素父元素的第一个子元素...选择属于父元素的第n个子元素 （10）:nth-last-child(n) 选择属于父元素倒是第n个元素 （11）p:nth-of-type(n) 选择属于其父元素第n个p元素（不是p元素的不在排序范围...） （12）p:nth-last-of-type(n) 选择属于其父元素倒数第n个p 元素 （13）p:empty 选择p元素没有内容的p元素 （14）target伪类 #news:target...解读：伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。

64630

CSS 基础

：方便在同页面中修改样式缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底3、外部样式表CSS代码保存在扩展名为.css的样式表中HTML文件引用扩展名为.css的样式表，有两种方式链接式...--@import url("style.css");-->CSS样式优先级：行内样式>内部样式表>外部样式表，就近原则六、CSS基本选择器1、标签选择器HTML标签作为标签选择器的名称...：…、、2、类选择器标签内容3、ID选择器#id { font-size:16px;}4、特点标签选择器直接应用于HTML...作为父元素的第一个子元素的元素EE:last-child作为父元素的最后一个子元素的元素EE F:nth-child(n)选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、oddE...:first-of-type选择父元素内具有指定类型的第一个E元素E:last-of-type选择父元素内具有指定类型的最后一个E元素E F:nth-of-type(n)选择父元素内具有指定类型的第n个

28430

C1 能力认证——Web基础

/index.js"> src head中一般使用哪个标签引入外部的CSS样式表文件？...，且满足冒号前的基础选择器选取要求 :first-of-type 用于选取属于其父元素的第一个特定类型的子元素 :last-child 用于选取属于其父元素的最后一个子元素且满足基础选择器选取要求 :last-of-type...用于选取属于其父元素的最后一个特定类型的子元素 :nth-child(N) 选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，N可以为数字、关键字（odd / even）、公式（如：2n+1...） :nth-of-type(N) 选择匹配属于其父元素的第N个指定类型的子元素，N可以为数字、关键字（odd / even）、公式 :nth-last-child(N) 选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求...，从最后一个子元素开始计数，N可以为数字、关键字（odd / even）、公式 :nth-last-of-type(N) 选择匹配属于其父元素的第N个指定类型的子元素，从最后一个子元素开始计数，N可以为数字

3.3K40

探索CSS：从入门到精通Web开发（二）

前言 当我们谈论网页设计和开发时，CSS（层叠样式表）无疑是其中的重要一环。作为HTML的伴侣，CSS赋予网页以丰富的样式和布局，使得网站看起来更加吸引人并且具备更好的可读性。...响应式设计： 随着移动设备的普及，响应式设计已经成为Web开发的标配。我们将介绍如何利用CSS媒体查询和弹性布局来创建适应不同屏幕尺寸的网页。.../my.css"> 行内式： css写在标签style属性中 作用范围 当前标签 配合js使用 zhishiyigedivbaioqian 基础选择器： 标签选择器： 就是以标签来命名的选择器...：hidden 二：给父元素设置border-top 或者padding-top 三：转换成行内元素 四：设置浮动 结构伪类选择器： 选择器：E:first-child{} 匹配父元素第一个子元素...E:last-child{}匹配父元素最后一个选择器 E:nth-child（n）{}匹配父元素第n个元素 E:nth-last-child（n）匹配父元素倒数第n个元素 n可以取值2n 4n

15410

探索CSS：从入门到精通Web开发（二）

前言 当我们谈论网页设计和开发时，CSS（层叠样式表）无疑是其中的重要一环。作为HTML的伴侣，CSS赋予网页以丰富的样式和布局，使得网站看起来更加吸引人并且具备更好的可读性。...响应式设计： 随着移动设备的普及，响应式设计已经成为Web开发的标配。我们将介绍如何利用CSS媒体查询和弹性布局来创建适应不同屏幕尺寸的网页。.../my.css"> 行内式： css写在标签style属性中 作用范围 当前标签 配合js使用 zhishiyigedivbaioqian 基础选择器： 标签选择器： 就是以标签来命名的选择器...：hidden 二：给父元素设置border-top 或者padding-top 三：转换成行内元素 四：设置浮动 结构伪类选择器： 选择器：E:first-child{} 匹配父元素第一个子元素...E:last-child{}匹配父元素最后一个选择器 E:nth-child（n）{}匹配父元素第n个元素 E:nth-last-child（n）匹配父元素倒数第n个元素 n可以取值2n 4n

13710

探索CSS：从入门到精通Web开发（二）

前言 当我们谈论网页设计和开发时，CSS（层叠样式表）无疑是其中的重要一环。作为HTML的伴侣，CSS赋予网页以丰富的样式和布局，使得网站看起来更加吸引人并且具备更好的可读性。...响应式设计： 随着移动设备的普及，响应式设计已经成为Web开发的标配。我们将介绍如何利用CSS媒体查询和弹性布局来创建适应不同屏幕尺寸的网页。.../my.css"> 行内式： css写在标签style属性中 作用范围 当前标签 配合js使用 zhishiyigedivbaioqian 基础选择器： 标签选择器： 就是以标签来命名的选择器...：hidden 二：给父元素设置border-top 或者padding-top 三：转换成行内元素 四：设置浮动 结构伪类选择器： 选择器：E:first-child{} 匹配父元素第一个子元素...E:last-child{}匹配父元素最后一个选择器 E:nth-child（n）{}匹配父元素第n个元素 E:nth-last-child（n）匹配父元素倒数第n个元素 n可以取值2n 4n

13410

HTML学习笔记——css基础

目录 前言 一、使用css修改元素的样式 1、内联样式、行内样式：  2、内部样式表： 3、外部样式表：（最佳） 二、CSS基本语法 三、CSS中的各类选择器 1、 元素选择器：  2、 id选择器...网页分成三个部分：结构（HTML）、表现（CSS）、行为（JavaScript） CSS： 定义：层叠样式表，用来设置网页中元素的样式。    ...2、内部样式表：         将样式编写到head中的style标签里面，然后通过css的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用。        ...3、外部样式表：（最佳）         可以将css样式编写到一个外部的css文件中，然后通过link标签来引入外部的css文件。        ...()  选中第n个子元素                  特殊值：n  第n                     n的范围0到正无穷                     2n 表示选中偶数位的元素

66920

常用的CSS3选择器

:nth-child(n)和:nth-last-child(n)选择器 使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第...2个或倒数第2个子元素，这两个选择器就不起作用了。...为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。...:nth-of-type(n)和:nth-last-of-type(n)选择器，这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第...n 个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第 n 个子元素和倒数第n个子元素，与元素类型无关。

4.1K20

总结CSS3新特性(选择器篇)

总结CSS3新特性(选择器篇) CSS3新增了 嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p{color: red;/*此条规则将用于p后边所有的p....,通过判断是否有http.com什么的(等到CSS4选择器问世就不用这么麻烦了[:local-link]) :first-of-type与:last-of-type: 从字面大概能看出来是干嘛使得,第一个这个类型的...:only-child: 选择仅有一个子元素的元素; 如果去掉:only-child前边的p,那个孤独的span也会应用该样式; 同样可以使用:not反选, :nth-child(n): 选择第...n个子元素,可以结合选择器来限制 结合变量n(应该说是关键字吧= =),可以用来在表格里,列表里做隔行换色什么的 :nth-last-child(n): 基本同上…只不过是从后往前数 :nth-of-type...,列表有空项,然后做点处理,用js选择空元素时这个挺有用的; :target: W3C给的解释是设置活动的id的样式,其实就是浏览器路径上边缀着#什么,就选着什么 传送阵; :enabled与:disabled

62140

css之选择器

CSS（Cascading层叠 Style样式 sheets表），是用来为网页添加样式的代码。...css选择器的作用是用于选中元素，以便为其添加样式 1.基础选择器 通用元素选择器（*），通常用于取消浏览器自带的样式，不常用 id选择器（#id） class类选择器（.class） 标签选择器（p）...(n) 匹配其父元素的第N个子元素，第一个标号为1，相当于E:first-child E:nth-last-child(n) 匹配其父元素的倒数第N个子元素，第一个编号为1 小tip：先找到E的父元素...，再选择它父元素下面第n个元素 E:nth-of-type(n) 选择满足E选择器的元素的父元素内，满足E选择器条件的子元素中不同种类型（类型是指标签，如p标签和div标签是不同种类型）第N...个子元素 小tip：先找到E的父元素，再选择它父元素下面满足E条件的元素，再选择这些元素同种类型的第N个 E:nth-last-of-type(n) 与nth-of-type(n) 作用类似，但是倒着匹配的

73640

jQuery 教程

(n) $(“p:nth-last-child(2)”) 属于其父元素的第二个子元素的所有 元素，从最后一个子元素开始计数 :nth-of-type(n) $(“p:nth-of-type(2)...如：$('div:animated) :eq(n) 选取第n个元素，如：$('ul.tonav li:eq(n)') :even 选取偶数个元素，如：$('li:even') :odd 选取奇数个元素，...:nth-child()选择同父代的第n个子代元素。 :nth-last-child()选择同父代的倒数第n个子代元素。 :nth-last-of-type()选择同父代的倒数第n个子代元素。...:nth-of-type()选择同父代的第n个子代元素。 :only-child选择只有一个子代的元素。 :only-of-type()选择所有没有同名元素的兄弟元素。...jQuery HTML / CSS 方法 下面的表格列出了所有用于处理 HTML 和 CSS 的 jQuery 方法。 下面的方法适用于 HTML 和 XML 文档。除了：html() 方法。

17K20

轮播图效果，不再局限于JS制作！

其精练的代码把我们从复杂的JS制作中解放出来，如下的轮播图效果即是纯CSS3制作的。 ? 2....主要涉及到的知识点 相比较来说，使用CSS3实现轮播图效果会比使用JS来的简单一些，只需要借助CSS3系列中的选择器、动画，再配合上相应的位置定位即可实现，下面来具体分析下需要用到的知识点。...2.2 CSS3选择器 主要功能是用于选择标签，有如下几个常用的选择器。 选择器:nth-child(n)：选择器匹配属于其父元素的第n个子元素，不论元素的类型。...选择器E:last-child：匹配其父元素下的最后一个子元素。 选择器E:first-child：匹配其父元素下的第一个子元素。...，结合CSS3的选择器、动画来进行实现的。

4.9K60

初识CSS3

-- rel="stylesheet"是指在本页面使用这个外部样式    type=text/css是指文件的类型是样式表文本    href="...css"文件所在位置...网页，这样会给用户不好的感觉这也是目前大多数网站用连接外部样式表的主要原因 5.样式的优先级：  行内元素>内部样式表>外部样式表 注：代码是逐条执行，如果内部样式比外部样式先声明，则外部样式具有优先级...E元素相邻的后面兄弟元素下，是一个或多个元素；  　　2）相邻兄弟选中的是与E元素仅挨的F元素，其中选中的仅是一个元素 8.结构伪类选择器  　　1）E：first-child   作为父元素的第一个子元素的元素...E 　　 2） E：last-child   作为父元素的最后一个子元素的元素E  　　3）E F：nth-child（n）  选择父级元素E 的第n个元素F（n可以是1/2/3）关键字为even  odd...(n)  选择父元素内具有指定类型的第n个F元素 注：E F：nth-child（n）和 E F:nth-of-type(n)使用时记住以下关键点：  　　　　　1）E F：nth-child（n）在父级里从第一个元素开始查找

75880

CSS伪类与伪元素

结构性伪类 CSS3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。...常见的伪元素选择器 div:first-child 选择属于其父元素的第一个子元素的每个div元素 div:last-child 选择属于其父元素最后一个子元素的每个div元素 div:nth-child...(n) 选择属于其父元素的第n个子元素的每个div元素 div:nth-last-child(n) 同上，从这个元素的最后一个子元素开始算 div:nth-of-type(n) 选择属于其父元素第n个div...:disabled 匹配禁用的表单元素 :enabled 匹配没有设置disabled属性的表单元素 :valid 匹配条件验证正确的表单元素 伪元素 用于创建一些不在文档树中的元素，并为其添加样式。...CSS3规范中要求使用单冒号:用于CSS3伪类，双冒号::用于 CSS3伪元素，目的是区分伪类和伪元素。

1.9K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券