今天想用nth-child来给一个类似于树的目录(bootstrap-nav-tree  一个angularjs插件)设置不同的颜色,结构大致类似于

<ul>
<li class="a">cat1</li>
<li class="b">cat2</li>
<li class="a">cat3</li>
<li class="b">cat4</li>
<li class="b">cat5</li>
<li class="b">cat6</li>
</ul>

  先需要获取class为a的项,然后设置标签颜色,于是代码想当然的书写如下:

li.a:nth-child(1){
color:#22acff;
}
li.a:nth-child(2){
color:#00d5a7;
}
.....

but....只有nth-child(1)有效果。如图所示:

这里需要知道两点:在伪类选择器中 XX:nth-child(n)

1.XX代表的不是父元素(这个坑我跳过去了)

2.n代表的不是第几个XX,而是XX的父元素下第几个子元素。(栽进去爬了半天才出来)

所以li.a:nth-child(2)不是指class为a的第二个标签,而是指ul下第二个子元素并且class为a的li标签!!

再举个栗子:

//HTML部分
<div>
<h3>cat0</h3> <p>cat1</p> <p>cat2</p> <p>cat3</p> <p>cat4</p>
</div> //CSS部分
div>p:nth-child(1){
color: #00f;
}

效果:

赶紧出坑!!

css选择器:first-child和nth-child 采坑记的更多相关文章

  1. 分布式改造剧集之Redis缓存采坑记

    Redis缓存采坑记 ​ 前言 ​ 这个其实应该属于分布式改造剧集中的一集(第一集见前面博客:http://www.cnblogs.com/Kidezyq/p/8748961.html),本来按照顺序 ...

  2. Spring Cloud Config采坑记

    1. Spring Cloud Config采坑记 1.1. 问题 在本地运行没问题,本地客户端服务能连上本地服务端服务,可一旦上线,发现本地连不上线上的服务 服务端添加security登录加密,客户 ...

  3. k8s采坑记 - 解决二进制安装环境下证书过期问题

    前言 上一篇k8s采坑记 - 证书过期之kubeadm重新生成证书阐述了如何使用kubeadm解决k8s证书过期问题. 本篇阐述使用二进制安装的kubernetes环境,如何升级过期证书? k8s配置 ...

  4. Redis适配采坑记

    Redis适配采坑记 相对于其他的适配,Redis可以说是非常简单的其中只发现一个坑 问题一: 问题描述: redis认证失败 问题详解: redis连接配置时,本地需要采用password属性,远程 ...

  5. tk.mybatis通用工具采坑记

    tk.mybatis通用工具pom <!--mybatis依赖--> <dependency> <groupId>org.mybatis.spring.boot&l ...

  6. dubbo初学采坑记

    写在前面的话 dubbo 现在是apache组织旗下的项目,相信国内也有很多人使用.最近一个同事离职,我就接手了他的项目.远程通讯就是用的dubbo框架来实现的.使用Intelij idea 写了一个 ...

  7. Service worker (@nuxtjs/workbox) 采坑记

    PWA(Progressive Web App)是前端的大趋势,它能极大的加快前端页面的加载速度,得到近乎原生 app 的展示效果(其实难说).PWA 其实是多种前端技术的组合,其中最重要的一个技术就 ...

  8. 通过css选择器class给元素添加cursor的坑

    笔者在chrome中遇到了奇特的问题,在通过class给元素添加cursor的自定义图片时.出现了"Invald property value"提示,crosshair.help等 ...

  9. 使用wepy框架搭建微信小程序采坑记(一)

    1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...

随机推荐

  1. python基础===利用unittest进行测试用例执行的几种方式

    利用python进行测试时,测试用例的加载方式有2种:  一种是通过unittest.main()来启动所需测试的测试模块:  一种是添加到testsuite集合中再加载所有的被测试对象,而tests ...

  2. C/C++——C语言库函数大全

    本文转载自:https://blog.csdn.net/yanfan0916/article/details/6450442###; 1. 分类函数: ctype.h  int isalpha(int ...

  3. MVC基础知识 – 2.新语法

    1.自动属性 Auto-Implemented Properties 2.隐式类型 var 3.参数默认值 和 命名参数 4.对象初始化器 与 集合初始化器 { } 5.匿名类 & 匿名方法 ...

  4. 【DEV C++】 Error: ld returned 1 exit status

    一般出现“ld returned 1 exit status”错误都是由于函数名称拼写错误造成的,或者在一个工程中不同的函数使用了同一个函数名,暂时还未遇到其他情况.

  5. 开源IDS系列--snorby 2.6.2 undefined method `run_daily_report' for Event:Class (NoMethodError)

    rails runner "Event.run_daily_report"测试邮件配置undefined method `run_daily_report' for Event:C ...

  6. java项目建立流程

    spring mvc 书籍Spring in Action, 4th Edition java项目建立流程 1 使用maven来管理项目中的库.先用marven建立一个框架mvn archetype: ...

  7. thinkphp5.0生命周期

    本篇内容我们对ThinkPHP5.0的应用请求的生命周期做大致的介绍,以便于开发者了解整个执行流程. 1.入口文件 用户发起的请求都会经过应用的入口文件,通常是 public/index.php文件. ...

  8. jquery选择器详细说明

    jquery中选择器感觉是用的特别多并且特别方便的一个方法,今天就在这里详细的记载下大多数常用的选择器,一起学习探讨. 首先介绍的是css3的选择器,其中包括了标签选择器(div),ID选择器(#ID ...

  9. svm常用核函数介绍

    这里有一篇博文介绍了,每个核函数的用途: https://blog.csdn.net/batuwuhanpei/article/details/52354822 在吴恩达的课上,也曾经给出过一系列的选 ...

  10. 洛谷——P1330 封锁阳光大学

    P1330 封锁阳光大学 题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构 ...