CSS3-:empty、:not()选择器的用法

:empty 用于选择指定的没有子元素（包括文本节点）的元素

举个例子：

CSS:

p {
  width: 200px;
  height: 36px;
  margin: 10px;
  border: 2px solid pink;
}
/* 选择所有没有子元素的 p 标签 */
p:empty {
  background-color: skyblue;
}

HTML:

<p></p>
<!-- 第二个 p 元素有文本子节点 -->
<p> </p>
<p></p>

:not(selector) 选择每个元素不是指定的元素或选择器部分；就是取非。

CSS:

span {
 display: block;
}
.box :not(p) {
  width: 200px;
  margin: 10px;
  color: #fff;
  background-color: purple;
  border: 2px solid orange;
}

HTML:

<div class="box">
  <h3>h3 标签</h3>
  <p>p标签</p>
  <span>span 标签</span>
  <p>p标签</p>
  <div>div 标签</div>
  <p>p标签</p>
</div>