外贸网站模板 外贸网站制作,花垣网站建设,海淀营销型网站建设,网页设计教程pdf上一篇我们学习了CSS基本样式和选择器#xff0c;相信大家对于样式的使用有了初步认知。 本篇我们继续来学习CSS中的扩展选择器及CSS继承性#xff0c;如何使用这些扩展选择器更好的帮助我们美化页面。 下一篇我们将会学习CSS中常用的属性。 喜欢的 【点赞】【关注】【收藏】… 上一篇我们学习了CSS基本样式和选择器相信大家对于样式的使用有了初步认知。 本篇我们继续来学习CSS中的扩展选择器及CSS继承性如何使用这些扩展选择器更好的帮助我们美化页面。 下一篇我们将会学习CSS中常用的属性。 喜欢的 【点赞】【关注】【收藏】 前言
1、组合选择器
2、包含选择器
3、交集选择器
4、伪类选择器
5、CSS继承性 前言 在实际工作过程中我们通常使用基本的ID选择器类选择器、标签选择器来实现我们的CSS样式但某些情况下这些基本选择器并不是最优解那么如何来让CSS实现更加灵活多变就是我们今天要学习的内容扩展选择器以及CSS继承性。 扩展选择器主要分为 组合选择器、包含选择器、交集选择器、伪类选择器 1、组合选择器
顾名思义就是将多种选择器进行组合一般当某些标签需要使用同样的样式而选择器又不同时使用。
语法 style 选择器1,选择器2,.....{ 属性:属性值; } /style 注意多个选择器之间一定英文状态逗号隔开
示例标签选择器、类选择器、id选择器组合使用 2、包含选择器
包含选择器也叫后代选择器最外层的是父标签依次往里是子标签。 语法 style 父标签 子标签 孙子标签....{ 属性:属性值; } /style 注意多个选择器之间一定空格隔开 示例 3、交集选择器 由两个选择器之间的连接组成结果是选中两个选择器各自的元素访问的交集第一个必须是标签选择器第二个必须是类或者ID选择器并且两个选择器之间不能有空格或者逗号等隔开必须是连续书写。 语法 style 标签名.类名{ 属性:属性值; } 标签名#ID名{ 属性:属性值; } /style 示例 4、伪类选择器
根据标签处于某种行为或状态时来修饰样式一般用来对用户与文档交互时的行为做出响应。
语法 标签名:伪类名{ 属性:属性值; } 常见伪类
伪类含义应用场景a:link未单击访问时的超链接样式常用超链接主样式a:visited单击访问后的超链接样式区分是否已被访问a:hover鼠标悬浮在超链接上的样式常用实现动态效果a:active鼠标单击未释放的超链接样式少用通常与link一致 示例 5、CSS继承性
样式表的继承规则是所有的标签中嵌套的元素都会继承外层指定的样式。 示例 好了就到这里吧大家抓紧时间去学习吧后续内容持续更新中创作不易【点赞】【关注】【收藏】支持一下哦祝各位看官万福金安 ⭐️徒手摘星爱而不得世人万千再难遇我。⭐️
