css选择器
2017-11-17 21:19
127 查看
做网页过程中发现对选择器理解不透彻。
1.nth-child
先找父元素在找指定的那个标签。
选择属于其父元素的第二个子元素的每个 p 元素。
2.nth-last-child
和nth-child用法一致,只是nth-child是从第一个开始计数,而nth-last-child是从倒数第一个开始计数的。
3.nth-of-type
选择属于其父元素第二个 p 元素的每个 p 元素。
选择匹配属于父元素的特定类型的第N个子元素的每个元素。但是nth-child()选取的与类型无关。
查询时发现张鑫旭的空间有说到这段,复制他举得例子,更好理解。
这个时候用p:nth-child(2)将不会选择任何标签,而p:nth-of-type(2)会选中变红,他表示父标签下的第二个p元素。而nth-child不会,因为父级元素下的第二个元素并不是p所以不会变色的。
4.nth-last-of-type(n)
同上,但是从最后一个子元素开始计数。
5.last-child
选择属于其父元素最后一个子元素每个 p元素。
6.:first-child
选择属于父元素的第一个子元素的每个 p 元素。
7.:first-of-type
选择属于其父元素的首个 p 元素的每个 p 元素。
8.:last-of-type
选择属于其父元素的最后 p 元素的每个 p 元素。
选择器的优先级
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
注意:
优先级相同时,则采用就近原则,选择最后出现的样式;
继承得来的属性,其优先级最低;
1.nth-child
先找父元素在找指定的那个标签。
p:nth-child(2)
选择属于其父元素的第二个子元素的每个 p 元素。
2.nth-last-child
p:nth-last-child(2)
和nth-child用法一致,只是nth-child是从第一个开始计数,而nth-last-child是从倒数第一个开始计数的。
3.nth-of-type
p:nth-of-type(2)
选择属于其父元素第二个 p 元素的每个 p 元素。
选择匹配属于父元素的特定类型的第N个子元素的每个元素。但是nth-child()选取的与类型无关。
查询时发现张鑫旭的空间有说到这段,复制他举得例子,更好理解。
<section> <div>我是一个普通的div标签</div> <span>我是一个普通的span标签</span> <p>我是第1个p标签</p> <p>我是第2个p标签</p> <!-- 希望这个变红 --> </section>
这个时候用p:nth-child(2)将不会选择任何标签,而p:nth-of-type(2)会选中变红,他表示父标签下的第二个p元素。而nth-child不会,因为父级元素下的第二个元素并不是p所以不会变色的。
4.nth-last-of-type(n)
同上,但是从最后一个子元素开始计数。
5.last-child
p:last-child
选择属于其父元素最后一个子元素每个 p元素。
6.:first-child
p:first-child
选择属于父元素的第一个子元素的每个 p 元素。
7.:first-of-type
p:first-of-type
选择属于其父元素的首个 p 元素的每个 p 元素。
8.:last-of-type
p:last-of-type
选择属于其父元素的最后 p 元素的每个 p 元素。
选择器的优先级
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
注意:
优先级相同时,则采用就近原则,选择最后出现的样式;
继承得来的属性,其优先级最低;
相关文章推荐
- 巧妙地使用CSS选择器
- 目前流行的几个JavaScript框架的CSS选择器速度比较
- CSS选择器笔记
- 征服高级CSS选择器
- 基本CSS选择器
- [收藏]css选择器
- 各浏览器中disabled属性及对应css选择器的差异性
- 关于CSS选择器的优先级,附上图片备忘
- 30个最常用CSS选择器解析
- 远离JS灾难css灾难之 js私有函数和css选择器作为容器
- (经典收藏)三十款最常用css选择器解析
- css选择器
- CSS选择器的权值计算
- [转载]jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
- CSS选择器
- selenium中使用css选择器进行元素定位
- css选择器总结
- flex4.5中CSS选择器的应用小结
- 牢记31种CSS选择器
- CSS选择器、优先级与匹配原理