html 层次选择器,5.CSS层次选择器-CSS进阶
五、CSS选择器
选择器,就是用一种方式把我们想要的那一个标签选中。把它选中了,你才能操作这个标签的CSS样式。
CSS中有很多把你所需要的标签选中的方式,这些不同的方式就是不同的选择器。
在2.CSS选择器-CSS基础中我们学习了以下几种选择器:
元素选择器
id选择器
class选择器
群组选择器
这些都是CSS中最基本的选择器。
层次选择器,就是通过元素之间的层次关系来选择元素。
层次选择器在实际开发中也是相当重要的,常见的层次关系包括:父子、后代、兄弟和相邻。
CSS层次选择器
选择器
说明
M N
后代选择器,选择M元素内部后代N元素(所有的N元素)
M>N
子代选择器,选择M元素内部子代N元素(所有第1级N元素)
M~N
兄弟选择器,选择M元素后所有的同级N元素。
M+N
相邻选择器,选择M元素相邻的下一个元素(M、N是同级元素)
1.后代选择器
后代选择器:选中元素内部中所有的指定的某个元素,包括子元素和其它后代元素。
(1)语法格式
M N{}
① 说明
M元素和N元素之间用空格隔开,表示选中M元素内部所有N元素后代。
(2)示例
① 例1
CSS层次选择器
/*后代选择器*/
#first p{
color:#FFC0CB;
}
子元素:人生若只如初见
子元素的子元素:当时只道是寻常
子元素:越努力,越幸运。
后代选择器示例11.png
2.子代选择器
子代选择器:选中元素内部的某一个子元素,只限子元素。
和后代选择器很相似,但却有不同。
(1)语法格式
M>N{}
① 说明
M元素和N元素之间用 > 隔开,表示选中M元素内部的子元素N。
(2)子代选择器与后代选择器区别
后代选择器,选取的是元素内部所有的元素,包括子元素。
子代选择器,选取的是元素内部某一个元素,只限子元素。
(3)示例
① 例1
CSS层次选择器
/*子代选择器*/
#first>p{
color:#FFC0CB;
}
子元素:人生若只如初见
子元素的子元素:当时只道是寻常
子元素:越努力,越幸运。
子代选择器示例1.png
3.兄弟选择器
兄弟选择器:选中元素后面(不包括前面)的某一类兄弟元素(同级)。
(1)语法格式
M~N{}
① 说明
M元素和N元素之间用 ~ 隔开,表示选中 M 元素后面的所有某一类兄弟元素 N。
(2)示例
① 例1
CSS层次选择器
/*兄弟选择器*/
#second ~ p{
color:greenyellow;
}
子元素:人生若只如初见
子元素的子元素:当时只道是寻常
子元素:越努力,越幸运。
子元素:
男儿何不带吴钩,收取关山五十州。
请君暂上凌烟阁,若个书生万户侯?
兄弟选择器示例1.png
4.相邻选择器
相邻选择器:选中元素后面(不包括前面)的某一个相邻的兄弟元素(同级)。
相邻选择器与兄弟选择器也很像。
(1)语法格式
M+N{}
① 说明
M元素和N元素之间用 + 隔开,表示选中 M 元素后面某一个相邻的兄弟元素 N。
(2)相邻选择器与兄弟选择器区别
兄弟选择器,选中元素后面所有的某一类元素。
相邻选择器,选中元素后面相邻的某一个元素。
(3)示例
① 例1
CSS层次选择器
/*相邻选择器*/
#second + p{
color:greenyellow;
}
子元素:人生若只如初见
子元素的子元素:当时只道是寻常
子元素:越努力,越幸运。
子元素:
男儿何不带吴钩,收取关山五十州。
请君暂上凌烟阁,若个书生万户侯?
相邻选择器示例1.png
② 例2
CSS层次选择器
*{
padding: 0; /*去除所有元素的 padding和margin*/
margin: 0;
}
ul{
list-style-type:none; /*去除列表默认符号*/
}
/*相邻选择器*/
li+li{
border-top:2px solid #FFD700;
}
- 第 1 li元素
- 第 2 li元素
- 第 3 li元素
- 第 4 li元素
- 第 5 li元素
相邻选择器示例2.png
(4)实际开发
在两个列表项之间使用相邻选择器是一个非常棒的技巧,在实际开发中如果我们想要在两个元素之间实现什么效果(例如:border、 margin等),我们会经常用到这个技巧!
一定要重点掌握。
① 例1
CSS层次选择器
*{
padding: 0; /*去除所有元素的 padding和margin*/
margin: 0;
}
ul{
list-style-type:none;
}
li{
float: left; /*去除列表默认符号*/
}
/*相邻选择器*/
li+li{
border-left:2px solid #FFD700;
}
- 第 1 li元素
- 第 2 li元素
- 第 3 li元素
- 第 4 li元素
- 第 5 li元素
相邻选择器示例3.png
(5)关于CSS3
到目前为止,我们已经学习了 8 种选择器,其实还有非常多重要的选择器,但大部分都是CSS3新增的。
CSS3非常强大,能实现非常多很棒的效果,以后一定要去学习一下CSS3。
html 层次选择器,5.CSS层次选择器-CSS进阶相关推荐
- CSS基本选择器、层次选择器、结构伪类选择器、属性选择器
目录 基本选择器 1.标签选择器 2.类选择器 3.ID选择器 层次选择器 结构伪类选择器 属性选择器 基本选择器 1.标签选择器 2.类选择器 3.ID选择器 层次选择器 选择器 类 型 功能描 ...
- jQuery选择器介绍:基本选择器、层次选择器、过滤选择器、表单选择器
这篇文章来介绍下jQuery的选择器. 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半 ...
- CSS 各类选择器 第一节
CSS 在 HTML 中使用 CSS 1.内联样式 内联样式是在元素属性中设置样式.此种方式很适合用于测试样式和快速查看样式效果,但是不推荐在整个文档上使用此方法. 在使用此方法时,必须在每一个元素上 ...
- HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器 交集选择器由两个选择器直接构成,其中第一个 ...
- CSS基础--选择器定位
学习目标: 学习层叠.优先级,以及在CSS中继承是如何工作的 掌握 CSS 稍微复杂的一些选择器,还有背景,边框等一些 CSS 样式属性. 进一步学习 CSS 选择器相关的知识 学习内容: 层叠与继承 ...
- CSS复合选择器(后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器 后代选择器又称为包含选择器 作用:用来选择元素或元素组的子孙后代 其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
- css 选择器(标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器)
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类 标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器 通配符选择器 标 ...
- 前端笔记(4)css,复合选择器,标签的显示模式,行高,css背景,css三大特性
css样式表/层叠样式表(2) (1)css复合选择器 后代选择器 子元素选择器 交集选择器(不常用) 并集选择器 链接伪类选择器 (2)标签的显示模式 块级元素block-level 行内元素inl ...
- 前端笔记(3)css,选择器,文字文本属性,外观属性
CSS样式表(1) (1)css概念 引入css的三种方法 行内式(内联样式) 内部样式表(内嵌样式表) 外部样式表(外链式) (2)css选择器 css基础选择器 标签选择器 类选择器 id选择器 ...
最新文章
- python生成试卷制卷系统_Python 读写文件 小应用:生成随机的测验试卷文件
- Codeforce 水题报告(2)
- left join on 后and 和 where 的区别
- c语言周林答案,C语言程序设计实训教程教学课件作者周林ch04结构化程序设计课件.ppt...
- babel 无法解析jsx (webpack react )
- PC连Moto V180上网
- eclipse java字体大小设置_eclipse怎样设置java代码字体大小? 值得收藏
- python查两个微博共同粉丝_Python:获取新浪微博用户的收听列表和粉丝列表
- 微信云开发实现点赞收藏评论功能
- 2.智能快递柜(终端篇)
- 笔记本显示器仅计算机,Nvidia X服务器设置仅显示1个屏幕(笔记本电脑+已连接外部显示器)...
- 不是你需要中台,而是一名合格的架构师(附各中台建设PPT)
- 最新花椒回放下载方法-马赛克视频助手
- Java学习路线图,内附完整Java自学视频教程+工具经验
- 4、基本命令-系统管理
- 什么叫显示动力学_ANSYS-什么叫显示动力学
- Zotero+Obsidian+Bookxnote联动让文献阅读丝滑般体验
- 中国电信欢go建立话费话费异常预警(国际)
- Java jdk14.0.1安装简单步骤
- ERP初阶(一):走近ERP