用css3选择器给你要的第几个元素添加不同样式方法【转发】
下面我们来了解一下css选择器里面的几个
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 | 3 |
:last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 |
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 |
我们可以使用 :nth-child(n) 来自动判断第4个
css代码如下
<style>
.list li:nth-child(4n){ border-bottom:1px dashed #ccc;} /*4n就是4的倍数都加这个样式*/
</style>
用css3选择器给你要的第几个元素添加不同样式方法【转发】的更多相关文章
- CSS3选择器介绍
1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 第6章 征服CSS3选择器(上)
属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进 ...
- css3选择器(上)
1.给导航加分割线,左右 .nav li::before,.nav li::after{ content:""; position:absolute; top:14px; heig ...
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- 神通广大的CSS3选择器
每个前端工程师可能每天都会写一些css,其中选择器是很主要的一部分.但是,大家可能每天写的大多是#id,.class这样的选择器,这并不稀奇,但是如果我们了解并且熟用css3为我们提供的强大并且优雅的 ...
- 总结30个CSS3选择器(转载)
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- CSS3选择器——基本选择器
CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...
- css3 选择器(三)
接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...
随机推荐
- loj117 有源汇有上下界最小流
link 题意&题解 code: #include<bits/stdc++.h> #define rep(i,x,y) for (int i=(x);i<=(y);i++) ...
- c++string函数详解
string,一个极为好用了函数,学好了这些函数,在模拟以及字符串问题上,回节省很多很多的写代码时间,代码复杂度以及错误率,那么这一类函数都有那些功能呢?我们来逐一介绍(让你大吃一惊,还有这种操作?) ...
- python开发_类型转换convert
在python的开发过程中,难免会遇到类型转换,这里给出常见的类型转换demo: int(x [,base ]) 将x转换为一个整数 long(x [,base ]) 将x转换为一个长整数 float ...
- jquery 常用获取值得方法汇总
jquery取radio单选按钮的值$("input[name='items']:checked").val();jquery radio取值,checkbox取值,select取 ...
- ubuntu14.04 内核升级到 linux kernel 4.9
http://blog.csdn.net/liuruiqun/article/details/55097292
- python核心模块之pickle和cPickle解说
pickle模块使用的数据格式是python专用的,而且不同版本号不向后兼容,同一时候也不能被其它语言说识别.要和其它语言交互,能够使用内置的json包使用pickle模块你能够把Python对象直接 ...
- 无法执行磁盘检查因为windows无法访问
固态硬盘迁移系统后,将原先的系统盘(H,重新系统后固态硬盘的主分区变为了C盘)格式化,并和邻近的D盘合并.合并后,将盘符重新改为D盘,而D盘原有的软件安装目录Program Files无法识别,显示目 ...
- ClientDataSet的版本兼容性
ClientDataSet的版本兼容性 在Delphi的早期版本中,Data这个Variant类型的值内部使用的是AnsiString来存贮的字节流,但我并不确定Delphi从什么时候开始,将其改为了 ...
- 笔记本如何查看mac地址
最近有网友咨询他的笔记本如何查看mac地址,一般情况当我们需要用mac地址,ip地址,本地dns的时候都可以参考下面的方法 MAC地址又称为网卡的物理地址,每台电脑都有一个唯一的MAC地址,也正因 ...
- node.js&pm2搭建node生产环境
node.js下载地址https://nodejs.org/en/download/stable/ 下载截图 建议采用稳定编译过的版本,source code稍麻烦,编译过的直接可用,安装超级简单,红 ...