伪类和伪元素选择器

单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。

伪类多表示状态  a:visited  a:hover   等      ，伪元素 多表示  html中的文本内容部分 

当然，也有例外，对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。

 

所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器或者是移动端页面，建议对于伪元素采用双冒号的写法，如果不得不兼容低版本 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。

伪类选择器 :focus-within

 

言归正传，今天要说的就是:focus-within 伪类选择器。

 

它表示一个元素获得焦点，或，该元素的后代元素获得焦点。划重点，它或它的后代获得焦点。

 

这也就意味着，它或它的后代获得焦点，都可以触发 :focus-within。

 

:focus-within 的冒泡性

 

这个属性有点类似 Javascript 的事件冒泡，从可获焦元素开始一直冒泡到根元素 html，都可以接收触发 :focus-within 事件：