CSS常用子元素选择器-选择特定子元素

选择器	举例	举例说明
:nth-of-type(n)	p:nth-of-type(2)	选择其父级下的第二个p元素
:last-of-type	p:last-of-type	选择其父级下的最后一个p元素
:nth-child(n)	p:nth-child(2)	选择其父级下的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择其父级下的第二个子元素，从最后一个子项计数
:nth-last-of-type(n)	:nth-last-of-type(2)	选择其父级下的第二个p元素，从最后一个子项计数
:first-child	p:first-childp	选择其父级下的第一个子元素。
:last-child	p:last-child	选择其父级下的最后一个子元素。
:first-line	p:first-line	选择<p>元素中的第一行

注：n可以是数字，也可以是表达式

常用举例：

p:nth-child(n + 2)：除其父元素下的第一个p元素外所有p元素

p:nth-last-child(n + 2)：除其父元素下倒数第一个p元素外所有p元素。

2n：偶数

2n+1：奇数

-n+4：第一个到第四个

3n：3的倍数，每三个取一次

注：nth-child(n)和：nth-of-type(n)的区别：

两者都可以选择其父元素下第n个子元素，但在子元素的类型上有所区分

p:nth-of-type(n)：其父元素下的第n个p元素

p:nth-child(n)：其父元素下的第n个且为p的元素，如果不是p，则选择失败

CSS常用子元素选择器-选择特定子元素相关推荐

html如何同时选择多个选择器,JS中如何使用选择器选择多个元素
在jQuery中,可以使用以逗号(,)分隔的元素选择器列表--多个元素选择器,或*选择器来选择多个元素. 多个元素选择器可用于选取多个元素,需要使用逗号分隔每个元素. *选择器选取文档中的所有元素,包 ...
CSS常用伪类选择器详解
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素. 应用场景: 鼠标经过元素时的样式变化,Tips提示,下拉列表和过渡动画等细节优 ...
CSS常用五类选择器
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. ㈠什么是选择器? 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/co ...
CSS常用五类选择器，经典好文
前言腾讯的面试凉了,接着开始面试网易网易的面试体验挺不错.它的微信公众号会给你叫号,前台小姐姐也会提醒你,每一面结束后都可以找前台小姐姐查询面试结果.而且食堂超级好吃!还可以边吃饭边吸猫!面试地点 ...
web开发首选，CSS常用五类选择器
生产-消费者队列,用于多节点的分布式数据结构,生产和消费数据.生产者创建一个数据对象,并放到队列中:消费者从队列中取出一个数据对象并进行处理.在ZooKeeper中,队列可以使用一个容器节点下创建多个 ...
[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
CSS回顾总结（二）——伪类、伪元素、子元素和后代元素选择器、盒子模型
目录伪类伪元素子元素和后代元素选择器盒子模型边距边框边框样式内联元素盒子模型伪类伪类:专门用来表示元素的一种特殊状态 * 比如:访问过的超 ...
css——常用选择器
一,常用的基本选择器 1.最基本的了 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
CSS学习笔记 2.选择器.常用.复合.关系选择器
一.常用选择器 1.元素选择器(标签选择器) 使用HTML标签作为选择器的名称 p{color:green;font-size:20px;/* 1元素选择器根据标签名来选中元素 */}/* 此为cs ...

CSS常用子元素选择器-选择特定子元素

CSS常用子元素选择器-选择特定子元素相关推荐

最新文章

热门文章