CSS常用选择器及优先级、一些易混淆选择器的区别
2017-08-17 01:24
447 查看
几个常用不易混淆的选择器就简单介绍一下,就不再赘述了:
通配选择器:*(获取所有标签);
类型选择器:如div、p;
class选择器:class,可以允许多个元素使用同一个class名;
id选择器:id,每个id名只能允许一个元素使用;
群组选择器:如div,p(中间用逗号隔开,表示选择所有div元素和所有p元素);
包含选择器:如div p(中间用空格隔开,表示选择div元素内部的所有p元素)。
常用选择器的优先级:
通配选择器 < 类型选择器 < class < id < 行间样式
以下是会用到但又经常混淆的选择器:
第一组:div>p 和div+p的区别
共用的HTML代码:
div>p: 表示选择父元素为div元素的所有p元素。
CSS代码:
页面效果:
div+p:表示选择紧接在div元素之后的所有p元素。
CSS代码:
页面效果:
第二组:nth-child和nth-of-type的区别
共用的HTML代码:
p:nth-child(2):选择属于其父元素的第二个子元素的每个 p元素。
CSS代码:
页面效果:
p:nth-of-type(2):选择属于其父元素第二个 p 元素的每个 p 元素。
CSS代码:
页面效果:
通配选择器:*(获取所有标签);
类型选择器:如div、p;
class选择器:class,可以允许多个元素使用同一个class名;
id选择器:id,每个id名只能允许一个元素使用;
群组选择器:如div,p(中间用逗号隔开,表示选择所有div元素和所有p元素);
包含选择器:如div p(中间用空格隔开,表示选择div元素内部的所有p元素)。
常用选择器的优先级:
通配选择器 < 类型选择器 < class < id < 行间样式
以下是会用到但又经常混淆的选择器:
第一组:div>p 和div+p的区别
共用的HTML代码:
<div class="box1"> <p class="main"> 我是box1下的p元素(box1的第一层子元素) </p> <div> <p class="main">我是box1的div元素下的p元素(box1的第二层子元素)</p> </div> <p class="main">我是紧接在box1下的p元素(box1 4000 的第一层子元素)</p> </div> <p class="main">我是紧接在box1后的p元素(box1的第一层子元素)</p> <p class="main">我是紧接在box1后的p元素(box1的第一层子元素)</p>
div>p: 表示选择父元素为div元素的所有p元素。
CSS代码:
.box1>.main { color: dodgerblue; }
页面效果:
div+p:表示选择紧接在div元素之后的所有p元素。
CSS代码:
.box1+.main { color: dodgerblue; }
页面效果:
第二组:nth-child和nth-of-type的区别
共用的HTML代码:
<section> <div>我是一个普通的div标签</div> <p>我是第1个p标签</p> <p>我是第2个p标签</p> <!-- 希望这个变红 --> </section>
p:nth-child(2):选择属于其父元素的第二个子元素的每个 p元素。
CSS代码:
p:nth-child(2) { color: lightpink; }
页面效果:
p:nth-of-type(2):选择属于其父元素第二个 p 元素的每个 p 元素。
CSS代码:
p:nth-of-type(2) { color: lightpink; }
页面效果:
相关文章推荐
- css的一些选择器以及优先级的比较
- css中一些常用选择器的介绍
- css引入方式优先级以及不同选择器的优先级区别
- CSS常用选择器及优先级
- css引入方式优先级以及不同选择器的优先级区别
- css中的一些常用选择器
- 关于IE和Firefox中javascript和css的一些区别 (来自网络)
- 30-CSS-03-CSS(基本选择器&优先级)
- 总结了一些常用的比较细节CSS和HTML代码的用法
- 常用的一些小知识点 html、jsp、css、js、java、tomcat、mysql 等
- 一些常用的css技巧
- CSS3伪类选择器:nth-child(n)及:nth-of-type(n)使用区别探究总结
- Css中常用的选择器
- 【css】css常用选择器
- css知多少(6)——选择器的优先级
- 关于IE和Firefox中javascript和css的一些区别
- div+css中的一些常用命名规范
- CSS 选择器 :last-child与:last-of-type的区别
- CSS动画(补充一些常用写法)
- 【Cocos2d-X(2.x) 游戏开发系列之一】cocos2dx(v2.x)与(v1.x)的一些常用函数区别讲解!在2.x版CCFileData类被去除等