css选择器:first-child和nth-child 采坑记
今天想用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 采坑记的更多相关文章
- 分布式改造剧集之Redis缓存采坑记
Redis缓存采坑记 前言 这个其实应该属于分布式改造剧集中的一集(第一集见前面博客:http://www.cnblogs.com/Kidezyq/p/8748961.html),本来按照顺序 ...
- Spring Cloud Config采坑记
1. Spring Cloud Config采坑记 1.1. 问题 在本地运行没问题,本地客户端服务能连上本地服务端服务,可一旦上线,发现本地连不上线上的服务 服务端添加security登录加密,客户 ...
- k8s采坑记 - 解决二进制安装环境下证书过期问题
前言 上一篇k8s采坑记 - 证书过期之kubeadm重新生成证书阐述了如何使用kubeadm解决k8s证书过期问题. 本篇阐述使用二进制安装的kubernetes环境,如何升级过期证书? k8s配置 ...
- Redis适配采坑记
Redis适配采坑记 相对于其他的适配,Redis可以说是非常简单的其中只发现一个坑 问题一: 问题描述: redis认证失败 问题详解: redis连接配置时,本地需要采用password属性,远程 ...
- tk.mybatis通用工具采坑记
tk.mybatis通用工具pom <!--mybatis依赖--> <dependency> <groupId>org.mybatis.spring.boot&l ...
- dubbo初学采坑记
写在前面的话 dubbo 现在是apache组织旗下的项目,相信国内也有很多人使用.最近一个同事离职,我就接手了他的项目.远程通讯就是用的dubbo框架来实现的.使用Intelij idea 写了一个 ...
- Service worker (@nuxtjs/workbox) 采坑记
PWA(Progressive Web App)是前端的大趋势,它能极大的加快前端页面的加载速度,得到近乎原生 app 的展示效果(其实难说).PWA 其实是多种前端技术的组合,其中最重要的一个技术就 ...
- 通过css选择器class给元素添加cursor的坑
笔者在chrome中遇到了奇特的问题,在通过class给元素添加cursor的自定义图片时.出现了"Invald property value"提示,crosshair.help等 ...
- 使用wepy框架搭建微信小程序采坑记(一)
1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...
随机推荐
- python基础===利用unittest进行测试用例执行的几种方式
利用python进行测试时,测试用例的加载方式有2种: 一种是通过unittest.main()来启动所需测试的测试模块: 一种是添加到testsuite集合中再加载所有的被测试对象,而tests ...
- C/C++——C语言库函数大全
本文转载自:https://blog.csdn.net/yanfan0916/article/details/6450442###; 1. 分类函数: ctype.h int isalpha(int ...
- MVC基础知识 – 2.新语法
1.自动属性 Auto-Implemented Properties 2.隐式类型 var 3.参数默认值 和 命名参数 4.对象初始化器 与 集合初始化器 { } 5.匿名类 & 匿名方法 ...
- 【DEV C++】 Error: ld returned 1 exit status
一般出现“ld returned 1 exit status”错误都是由于函数名称拼写错误造成的,或者在一个工程中不同的函数使用了同一个函数名,暂时还未遇到其他情况.
- 开源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 ...
- java项目建立流程
spring mvc 书籍Spring in Action, 4th Edition java项目建立流程 1 使用maven来管理项目中的库.先用marven建立一个框架mvn archetype: ...
- thinkphp5.0生命周期
本篇内容我们对ThinkPHP5.0的应用请求的生命周期做大致的介绍,以便于开发者了解整个执行流程. 1.入口文件 用户发起的请求都会经过应用的入口文件,通常是 public/index.php文件. ...
- jquery选择器详细说明
jquery中选择器感觉是用的特别多并且特别方便的一个方法,今天就在这里详细的记载下大多数常用的选择器,一起学习探讨. 首先介绍的是css3的选择器,其中包括了标签选择器(div),ID选择器(#ID ...
- svm常用核函数介绍
这里有一篇博文介绍了,每个核函数的用途: https://blog.csdn.net/batuwuhanpei/article/details/52354822 在吴恩达的课上,也曾经给出过一系列的选 ...
- 洛谷——P1330 封锁阳光大学
P1330 封锁阳光大学 题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构 ...