CSS高级应用技巧两则

最近在开发我的两个新网站的过程中摸索学习到两个CSS非常有用但鲜为人知的技巧,在此分享记录一下。

一、伪类“:hover”的另类用法

伪类“:hover”的官方解释是:选择鼠标指针浮动在其上的元素,并设置其样式。一般常用场景为设置元素当鼠标经过时改变样式,比如我们要实现当鼠标浮动到链接时改变链接的文字颜色,则可以添加样式“a:hover:color:#222”,但是我在开发网站的过程中发现,这个样式还可以通过特殊写法用来改变子元素的状态,比如我可以这样写:.diva:hover.divb:color:#222,这个写法的样式效果是当鼠标经过diva时,divb的文字颜色发生改变(其中divb必须是diva的子元素此样式才会产生效果),得知这个特性后在某些应用场景非常实用,比如我可以用这个样式来实现当鼠标经过时显示某些内容,这可以在不依靠JS的情况下用来做导航的二级菜单或者展示二维码。

二、元素两端对齐

之所以说是元素两端对齐,是因为这个方法不是针对文字段落的两端对齐而是针对元素的,比如在一个盒子模型中有若干元素,用文字两端对齐的样式是无法实现盒子内部元素两端对齐效果的,这时候给盒子添加样式“display:flex;justify-content:space-between”(经过测试,这两个属性无需考虑兼容性,在主流浏览器中标准写法是被支持的)即可轻易实现两端对齐的效果。

以上两个技巧,我称之为高级技巧,是因为在之前我并没有掌握,而当我发现了以后觉得非常实用与神奇,如果你还有其它CSS相关的使用技巧,欢迎一起交流。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,827评论 1 92
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,110评论 0 0
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,645评论 32 459
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,891评论 0 6
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,247评论 0 40