伪类选择器
区别于类选择器，类选择器是由用户自己定义的，而伪类选择器是在CSS中已经定义好的选择器。
可分为：结构伪类、UI元素伪类 选择器
结构伪类：
是利用文档机构树实现元素的查找，也就是通过文档结构的位置关系来匹配，使得文档更加灵活。
1 基本结构伪类
:root匹配文档根元素
如：
<style> :root{ background-color:skyblue; } body{ background-color:grey; } </style> <body> this is body </body> |
:not 对某个结构元素(比如body)使用样式，但排除这个元素下(比如body)的子元素（比如h1）。
例如：
<style> :root{ background-color:skyblue; } body :not(h1){ background-color:grey; } </style> ///////////////////////////////////////////////////////////////// <body> 无标记时，默认 <h2>this is body</h2> <h1> not h1 </h1> <p> p </p> </body> |
:empty指定当元素内容为空时使用
<element>:empty { /* style properties */ }div{ background:green; height:100px; width:100px;; } div:empty{ height:10px; background:red;; } //////////////////////////////////////////////////////////////////////// <div> <p> p </p> </div> <div></div> <div><!--空格换行也算有内容，不为空--> </div> <div></div> <div> 空格 换行 也算有内容 </div> <div><!--这样注释才算做空--></div> |