CSS的2个冷门却又实用的选择器
2016-10-11 00:28
134 查看
一般来说我们写CSS选择器时,倾向于直接用空格隔开,比如 div p 。
但是这种选择器选择范围太广,当我们想定位到个别元素,又不想使用独立的类时,就不方便了。
因此,最近的学习中遇到几个不常用,但是很好用的选择器:
第1个" >":
所有主流浏览器都支持 element>element 选择器。
注释:对于 IE8 及更早版本的浏览器中的 element>element,必须声明 <!DOCTYPE>。
其实这个选择器,还可以这么描述:
div > p: 选中div下的所有第一级p元素。举个栗子,采用如下的方式,span标签中的内容就无法被选中了。
第2个" +":
所有主流浏览器都支持 element+element 选择器。
注释:对于 IE8 及更早版本的浏览器中的 element+element,必须声明 <!DOCTYPE>。
这个选择器其实选中的是div之后紧邻的第一个p元素。
第3个" nth-child":
所有主流浏览器均支持 :nth-child() 选择器,除了 IE8 及更早的版本。
nth-child( n ) , 这个选择器不支持IE8,但是在一些大型的网站上都有使用,用起来感觉还是挺方便的。
参考文档:
http://www.w3school.com.cn/cssref/css_selectors.asp
但是这种选择器选择范围太广,当我们想定位到个别元素,又不想使用独立的类时,就不方便了。
因此,最近的学习中遇到几个不常用,但是很好用的选择器:
第1个" >":
element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 |
注释:对于 IE8 及更早版本的浏览器中的 element>element,必须声明 <!DOCTYPE>。
其实这个选择器,还可以这么描述:
div > p: 选中div下的所有第一级p元素。举个栗子,采用如下的方式,span标签中的内容就无法被选中了。
<div> <span> <p>我是唐老鸭。</p> </span> <p>我住在 Duckburg。</p> </div>
第2个" +":
element+element | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。 |
注释:对于 IE8 及更早版本的浏览器中的 element+element,必须声明 <!DOCTYPE>。
这个选择器其实选中的是div之后紧邻的第一个p元素。
<div> <p>我是唐老鸭。</p> <p>我住在 Duckburg。</p> </div> <p>我最好的朋友是米老鼠。</p> <p>我的样式不会改变。</p>
第3个" nth-child":
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
nth-child( n ) , 这个选择器不支持IE8,但是在一些大型的网站上都有使用,用起来感觉还是挺方便的。
参考文档:
http://www.w3school.com.cn/cssref/css_selectors.asp
相关文章推荐
- css基础语法和选择器的使用
- css串联选择器和后代选择器使用方法
- CSS之选择器及其优先级
- css引入方式,选择器,属性,行内、块级元素--Day3
- CSS 选择器
- CSS学习笔记2:CSS基础选择器
- BeautifulSoup高级应用 之 CSS selectors /CSS 选择器
- CSS 1.0~3.0选择器(上)
- css基础 id选择器 简单示例
- CSS 类选择器
- CSS伪类选择器active模拟JavaScript点击事件
- Css3之基础-2 Css 基础选择器
- css的选择器 :before :after 实用例子
- css 中多个class选择器的详解
- Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)
- Css基础-类选择器
- CSS学习笔记----选择器与字体(字系)
- 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器?
- CSS需求,选择器,伪类选择器