功能。
错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持下面这两种表示方式。
id::after{
...
}
页面，建议对于伪元素采用双冒号的写法，如果不得不兼容低版本 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。
:focus-within 伪类选择器。
:focus-within。
属性有点类似 Javascript 的事件冒泡，从可获焦元素开始一直冒泡到根元素 html，都可以接收触发 :focus-within 事件，类似下面这个简单的例子这样：
input {
...
&:focus {
background: #00bcd4;
}
}
html:focus-within {
background: #e91e63;
}
body:focus-within {
background: #ff5722;
}
.g-father:focus-within {
background: #ffeb3b;
}
.g-children:focus-within {
background: #4caf50;
}
:focus-within 可以提供什么能力，做些什么事情。
:focus-within 感应用户操作聚焦区域，高亮提醒。
:focus-within 做了什么呢？
代码表达出来大概是这样：
input {
....
}}
:focus-within 可以在父节点获取元素获得焦点的特性，实现的TAB导航切换：
:not(:focus-within) 来设置默认样式：
.nav-B:focus-within ~ .content-box .content-B {
display: block;
}
:placeholder-shown 伪类实现表单效果
:focus-within 一个人能力有限，通常也会配合其他伪类实现一些不错的效果。这里要再简单介绍的是另外一个有意思的伪类 :placeholder-shown。
:placeholder-shown：The :placeholder-shown CSS pseudo-class represents any or