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基础===对字符串进行左右中对齐
例如,有一个字典如下: >>> dic = { "name": "botoo", "url": "http:// ...
- nfs服务器配置
安装 nfs-utils,该软件包提供了 NFS 工具: # yum install nfs-utils 配置启动脚本,使得共享在系统每次启动时都有效: # chkconfig --add rpcbi ...
- windows安装React Native开发运行环境
React Native是什么 React Native是facebook开源的一个用于开发app的框架.React Native的设计理念:既拥有Native (原生) 的用户体验.又保留React ...
- Linux中如何配置IP相关文件
Linux中如何配置IP 与网络相关的文件:1) /etc/sysconfig/network 设置主机名称及能否启动Network2) /etc/sysconfig/network-script ...
- setsid
说明:当进程是会话的领头进程时setsid()调用失败并返回(-1).setsid()调用成功后,返回新的会话的ID,调用setsid函数的进程成为新的会话的领头进程,并与其父进程的会话组和进程组脱离 ...
- python_xlsxwriter模块
1.workbook类 add_worksheet 用于添加一个新的工作表,sheetname为工作表名称,默认是sheet1,例如: worksheet = workbook.add_workshe ...
- spring源码分析---IOC(1)
我们都知道spring有2个最重要的概念,IOC(控制反转)和AOP(依赖注入).今天我就分享一下spring源码的IOC. IOC的定义:直观的来说,就是由spring来负责控制对象的生命周期和对象 ...
- Python静态代码检查工具Flake8
简介 Flake8 是由Python官方发布的一款辅助检测Python代码是否规范的工具,相对于目前热度比较高的Pylint来说,Flake8检查规则灵活,支持集成额外插件,扩展性强.Flake8是对 ...
- 总结开发ERP软件应遵循的一些基本原则
总结一下做管理软件,有哪些项是经过检验的条款,必须遵守的. 界面篇 1 要保存用户的偏号(profile/favourite). ASP.NET 2.0引入此功能,当用户修改默认的控件的属性时,框架 ...
- Oracle与MySQL连接配置
MySQL: Driver: com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/GBDSPT(数据库名称) Oracle: Driver:o ...