当前位置: 首页 > Web前端 > HTML

CSS-伪类选择器(未完待续...)

时间:2023-04-02 14:42:59 HTML

子节点选择器:nth-??of-type()&&:nth-child():nth-of-type(n)匹配下同一个节点parentnodelabel对应level的第n个节点(:nth-last-of-type(n)逆序):nth-child(n)匹配父节点和child下同层的第n个子节点node是对应的标签(:nth-last-child(n)逆序)值得注意的是::nth-如果加上类名限制,则子节点的顺序n不受类名的影响搜索时没有限制,但是搜索到的结果是受类名限制的。:nth-of-type()&&:nth-child()区分

1-1个p元素

2-1个p元素

2-1节元素

2-2p元素

2-3p元素

1-2节元素
1-3节元素
1-4节元素

1-2p元素

前1-3p元素

section>p,section>section{padding-left:30px;}p:nth-of-type(2){color:red;}p:nth-child(2){background:red;}p.info:nth-of-type(2){}Result:p:nth-child(2)invalidp:nth-of-type(2):匹配父节点下p的第二个子节点p:nth-child(2):匹配父节点下的第二个子节点,第二个子节点为p注

1

2-1
2-2

3

4

5

.foo:nth-of-type(2){color:red;}作用:类名顺序无效,匹配每一层同类型的第二个标签而class名称foo满足:nth-??of-type(2)结果为2-2

3

,但是

3

没有匹配到类名foo,所以最终匹配结果为2-2

1

2-1
2-22-3

3

4

5

p.foo:nth-of-type(3){颜色:red;}结果:类名顺序无效,每层匹配第三个p标签,p标签的类名是foo.div>p匹配所有

元素兄弟节点选择器div+p的parentis

匹配紧跟在
元素之后的所有

元素