css选择器找亲戚
1、first-child
first-child表示选择列表中的第一个标签。代码如下:
li:first-child{background:#090}
上面的意思是,li 列表中的 第一个li模块的背景颜色。
2、last-child
last-child表示选择列表中的最后一个标签,代码如下:
li:last-child{background:#090}
3、nth-child(3)
表示选择列表中的第3个标签,代码如下:
li:nth-child(3){background:#090}
上面代码中的3也可以改成其它数字,如4、5等。想选择第几个标签,就填写几。
4、nth-child(2n)
这个表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签。
5、nth-child(2n-1)
这个表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签。
6、nth-child(n+3)
这个表示选择列表中的标签从第3个开始到最后。
7、nth-child(-n+3)
这个表示选择列表中的标签从0到3,即小于3的标签。
8、nth-last-child(3)
这个表示选择列表中的倒数第3个标签。
css选择器找亲戚的更多相关文章
- css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...
- js,jq,css选择器
js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...
- 【CSS】使用CSS选择器
CCS选择器的作用是找出某类元素.以便使我们使用style元素或者外部样式表对这类元素设置样式. 1.使用CSS基本选择器 有些选择器使用起来非常简单,我们把这部分选择器称为基本选择器(basic s ...
- CSS选择器性能分析
写了几篇关于js的博客,也是关于性能的,现在,我觉得有必要那css来认真分析一下了.之前只是看别人这么写就跟着写,但是没有去研究这样写或者是不是正确的写法,性价比怎么样,渲染的效率好么!这些都没有考虑 ...
- 关于CSS选择器的效率问题
最近一段时间接触CSS比较多,所以从网上找了写资料,这里做下总结. 以下是CSS选择器的效率排名: id选择器(#myid) 类选择器(.myclassname) 标签选择器(div,h1,p) 相邻 ...
- 第七十节,css选择器
css选择器 学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 本章主要探讨 HTML5中 CSS选择器,通过选择器定位到想要设置样式的元素.目前CSS选择器的版本已经升 ...
- CSS选择器渲染效率
1 浏览器如何识别你的选择器 首先我们需要清楚,浏览器是如何读取选择器,以识别样式,并将相应的样式附于对应的HTML元素,达到美化页面的效果.Chris Coyier曾在<Efficiently ...
- jQuery选择器与CSS选择器
1. 通过位置选择的几个操作: :first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在ul ...
- CSS 选择器简介
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 选择器权重 如果以4位数表示选择符权重,那么: 元素选择器的权重是1: id 选择器的权重为100: cl ...
随机推荐
- python定义接口继承类invalid syntax解决办法
class s_all(metaclass=abc.ABCMeta): #python2.7用此方法定义接口继承 # __metaclass__ = abc.ABCMeta @abc.abstract ...
- osg(openscenegraph).chm帮助文档
openscenegraph 3.6.3 链接:https://pan.baidu.com/s/1cQkiTPQx5MIIfxe5FTfjYw 提取码:7w4z openscenegraph 3.4 ...
- tomcat 8.xxx ssl使用websocket Failed to close the ServletOutputStream connection cleanly
报错: 2019-09-17 10:30:17.277 default [https-jsse-nio-8110-exec-20] INFO o.a.t.w.s.WsRemoteEndpointImp ...
- linux操作备份
---------------------------------------------------------------------------------------------------- ...
- Pedro domingos
Dear Professor: I am a university student in China and study on MLN recently; ...
- 安装ELectron失败解决方案
npm安装Electron解决方案 Electron使用npm安装时,因为是国外的镜像源,所以速度会非常慢.而使用cnpm如下命令进行安装时,又会出现安装失败的问题: npm install elec ...
- Go语言实现bitmap算法
有关bitmap算法的介绍资料网上很多,这里不赘述,各种语言的实现也不少,但是Go语言版的bitmap不多,本文就来写一个Go版的bitmap实现. 首先创建一个 bitmap.go 文件,定义一个b ...
- 为 Exchange 2010 用户添加联系人头像
一.修改AD架构 为了给联系人添加头像,实际是让联系人头像缩略图能够显示在全局地址列表 GAL 中,需要让其在全局编录(GC)中进行复制,默认情况下,对象的“thumbnailphoto”属性值不会在 ...
- Hackergame2019 web
前几天跟着几个大佬一起看了看中科大的Hackergame2019,这个比赛主要针对的是新手,激发新生对CTF比赛的兴趣,虽然我已经大三了,但实在是因为我过于five,也只能帮大佬打打杂,这里把自己做的 ...
- ue-cli3 取消eslint校验代码
参考链接:https://www.cnblogs.com/sjie/p/9884362.html