前端学习之路css(05)-基础知识
来源:互联网 发布:营销人员数据统计分析 编辑:程序博客网 时间:2024/05/18 03:17
CSS 组合选择符
组合选择器可表示两个选择器之间的关系,它包括了4中组合方式:
- 后代选取器(以空格分隔’ ‘);
- 子元素选择器(以大于号分隔’>’);
- 相邻兄弟选择器(以加号分隔’+’);
- 普通兄弟选择器(以破折号分隔’~’)。
后代选取器
后代选择器,’a b’,b元素如果包含在a元素中,那么它继承a的所有属性。只要b在a中不管是几级嵌套b都有a的属性。
子元素选择器>
和上面的后代选择器类似,但有一点不同只有某元素a的子元素b才继承a的属性。可以这样理解后代选择器是子子孙孙都继承属性,而子元素选择器只有儿子继承父亲的属性。
我们利用后代选择器的代码,只是将其改为子元素选择器。
相邻兄弟选择器+
和元素a相邻的同一级别的元素具有其属性。
我们利用后代选择器的代码,只是将其改为相邻兄弟选择器。
普通兄弟选择器~
顾名思义,只要是同一级别的元素都具有此属性。
我们利用后代选择器的代码,只是将其改为普通兄弟选择器。
CSS 伪类/伪元素
伪类和伪元素的作用都是为选择器添加一些特殊的效果,那么它们有哪些异同呢?
伪类
伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容,原则上特征是不可以从文档树上推断得到的。在CSS中,就是CSS內植类内部赋予它的一些特性,也就是我们不需要再class=…或id=…你就可以直接拿来用,我们可以改变其部分值,比如:a:link{color:#123456;}
伪元素
伪元素指的是具体的内容,例如文档语言不能提供访问元素内容第一字或者第一行的机制,伪元素允许设计师引用它们,否则这是难以办到的。
通过一个例子来理解伪类的作用,点击目标区域时,颜色变为红色。
通过一个例子来理解伪元素的作用,我们让div块内第一个文字放大且颜色为蓝色。
详情参见 伪类 伪元素
0 0
- 前端学习之路css(05)-基础知识
- 前端学习之路css(04)-基础知识
- 前端学习之路css(06)-基础知识
- 前端学习之CSS基础知识(2)
- 前端基础知识之CSS初识
- python之 前端HTML/CSS基础知识学习笔记
- 前端学习之路css3(01)-基础知识
- 前端学习之路css3(02)-基础知识
- 前端学习之路css3(03)-基础知识
- 前端学习之路css(01)-简介
- 前端学习之CSS-1
- iOS转前端之HTML基础知识学习
- 前端学习之路——css高级
- 前端学习之路-css选择器和布局
- 前端学习之路css(02)-基础属性
- 前端学习之路css(03)-基础属性
- CSS学习之样式表基础知识
- CSS学习篇之——基础知识
- 十五天精通WCF——第六天 你必须要了解的3种通信模式
- 前端学习之路css(04)-基础知识
- 十五天精通WCF——第七天 Close和Abort到底该怎么用才对得起观众
- 交叉编译e2fsprogs For android
- 十五天精通WCF——第八天 对“绑定”的最后一点理解
- 前端学习之路css(05)-基础知识
- Python的MySQLdb模块安装
- 十五天精通WCF——第九天 高级玩法之自定义Behavior
- 数据集总结
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
- 十五天精通WCF——第十天 学会用SvcConfigEditor来简化配置
- 前端学习之路css(06)-基础知识
- 十五天精通WCF——第十一天 如何对wcf进行全程监控
- 前端学习之路css3(01)-基础知识