CSS 选择器
2016-11-16 10:24
127 查看
选取第一个、最后一个元素
方法一#op li:last-child{ background: #ff0000;} #op li:first-child{ background: #2B93D2;}
方法二
#op li:first-of-type{ background: #4CAF50;} #op li:last-of-type{ background: #8a8e9c;}
区别满足条件:
[一个满足条件]:p:nth-of-type(2)表示父标签下的第二个p元素。
[两个满足条件]
p:nth-child(2)表示这个元素要是p标签,且是第二个子元素【结构】,是两个必须满足的条件。
:first-child选择器是css2中定义的选择器 :
匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。
:first-of-type选择器是css3中定义的选择器 :
匹配的是该类型的第一个,类型是指什么呢,就是冒号前面匹配到的东西,比如 p:first-of-type,就是指所有p元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了,当然这些元素的范围都是属于同一级的,也就是同辈的。
同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。
推荐使用:nth-of-type,不容易出问题,因为页面元素插入其他标签啊什么的是比较常见的。
常用:
#Ulist li:nth-of-type(even){background:#ccc;} /*选取偶数行*/ #Ulist li:nth-of-type(odd){ background:#ccc;} /*选取奇数行*/ #Ulist li:nth-child(2n){background:#ccc;} /* 选取偶数标签 */ #Ulist li:nth-child(2n-1){background:#ccc;} /* 选取奇数标签 */ #Ulist li:nth-child(n+4){background:#ccc;} /*选取大于等于4标签*/ #Ulist li:nth-child(-n+4){background:#ccc;} /*选取小于等于4标签*/ #Ulist li:nth-child(3n+1){background:#ccc;} /* 3n+1表示“隔二取一” */
CSS 选择相邻兄弟选择器:
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器h1 + p {margin-top:50px; //“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素
CSS 选择相邻兄弟选择器
:http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp
CSS 选择器参考手册
http://www.w3school.com.cn/cssref/css_selectors.asp
相关文章推荐
- CSS文本,锚伪类选择器以及盒子模型
- CSS教程之选择器
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
- CSS 选择器
- CSS基础(1.选择器)
- css类选择器的使用方法详解
- CSS常用选择器
- css 选择器
- IE下的CSS3伪类选择器支持(原创理论)
- CSS基础之选择器
- HTML基本结构、CSS引入方式以及选择器
- css 选择器
- 你不知道的css之标签选择器效果
- css整理-01选择器和继承
- CSS 类选择器
- CSS 相邻选择器(七)
- CSS特性选择器
- CSS基础知识一(CSS的应用方式、CSS选择器、选择器的声明、文字CSS效果、)
- CSS 选择器参考手册
- html 学习(css class选择器)