CSS-伪类选择器（未完待续。。。）

未东兴发布于2019-08-02 14:18 / 1678人阅读

摘要：满足结果的为和，但是不匹配类名为，所以最后匹配结果为结果类名顺序失效匹配每一级第三个标签且标签类名为的。匹配所有父级是的元素兄弟节点选择器匹配所有紧接着元素之后的元素

子节点选择器 :nth-of-type() && :nth-child()

:nth-of-type(n) 匹配父节点下同一级对应标签的第n个节点 (:nth-last-of-type(n)反序)

:nth-child(n) 匹配父节点下同一级第n个子节点且子节点为对应标签(:nth-last-child(n)反序)

值得注意的是：:nth-如添加了类名限制,查找时子节点的顺序n不受类名限制影响，但查找到的结果受类名限制。

:nth-of-type() && :nth-child()区别


  第1-1个p元素
  
    第2-1个p元素
    第2-1个section元素
    第2-2个p元素
    第2-3个p元素
  
  第1-2个section元素
  第1-3个section元素
  第1-4个section元素
  第1-2个p元素
  第1-3个p元素

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){
    
}

结果：p:nth-child(2) 无效

p:nth-of-type(2): 匹配父节点下的第二个是p的子节点
p:nth-child(2)：匹配父节点下第二个子节点同时第二个子节点为p

注意点

.foo:nth-of-type(2) {
  color: red;
}

效果：类名顺序失效, 匹配每一级同一个类型的第二个标签且类名为foo的。
满足:nth-of-type(2)结果的为

2-2

和

，但是

不匹配类名为foo，所以最后匹配结果为

2-2

p.foo:nth-of-type(3) {
  color: red;
}

结果：类名顺序失效, 匹配每一级第三个p标签且p标签类名为foo的。

div>p

匹配所有父级是

的

元素

兄弟节点选择器 div+p

匹配所有紧接着

元素之后的

元素

云服务器 GPU云服务器 css选择器基础选择器css css选择 js css 加载器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53716.html

CSS札记（一）：CSS选择器

一、语法规则选择器{ 属性1:属性值1; 属性2:属性值2; ...... } /*注释*/ 二、如何在html中应用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夹和HTML位于同一个目录下） 2. 内部嵌入css /*css代码*/ 3...

yzzz 2019-08-30 14:20 评论0 收藏0
CSS札记（一）：CSS选择器

一、语法规则选择器{ 属性1:属性值1; 属性2:属性值2; ...... } /*注释*/ 二、如何在html中应用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夹和HTML位于同一个目录下） 2. 内部嵌入css /*css代码*/ 3...

孙淑建 2019-08-02 10:05 评论0 收藏0
记一次前端面试试水笔记

摘要：浪费青春话不多说，之前投的简历，有家公司忽然联系说，想和我约个时间点电话面试。不了解自己的水平，永远都会止步于眼前的安逸。电话面试流程面试官简单介绍一下来意，然后先了解工作经验，再问技术问题。最近换了个项目，现阶段处于项目启动阶段，没有开发任务，天天悠悠哉哉地都快把自己的本职忘了。浪费青春！！！话不多说，之前投的简历，有家公司HR忽然联系说，想和我约个时间点电话面试。虽然这段时间一直...

shleyZ 2019-08-30 15:55 评论0 收藏0
记一次前端面试试水笔记

摘要：浪费青春话不多说，之前投的简历，有家公司忽然联系说，想和我约个时间点电话面试。不了解自己的水平，永远都会止步于眼前的安逸。电话面试流程面试官简单介绍一下来意，然后先了解工作经验，再问技术问题。最近换了个项目，现阶段处于项目启动阶段，没有开发任务，天天悠悠哉哉地都快把自己的本职忘了。浪费青春！！！话不多说，之前投的简历，有家公司HR忽然联系说，想和我约个时间点电话面试。虽然这段时间一直...

张红新 2019-08-23 14:43 评论0 收藏0