文章地址 https://www.cnblogs.com/sandraryan/
root：将样式绑定到根元素（html中的根元素是<html></html>）
举个栗子
:root{ background-color: yellow; } body{ background-color: lightgray; } .div1{ width: 200px; height: 200px; background-color: black; margin: 0 auto; } </style> </head> <body> <div class="div1"></div> </body>
效果：除了div黑色，div所在行是浅灰色，其余部分黄色（：root）
（效果图太大 不放了）
所以：我以为，root的样式是<html>以内<body>以外部分的样式
：not 不选择某个元素中的某个部分
.box *:not(h1){
/*选择.box下所有元素中不是h1的 */ width: 50px; height: 50px; background-color:red; } <body> <div class="box"> <div></div> <div></div> <h1></h1> </div> </body>
:empty 元素中内容空白时显示的样式
<style> div:empty{ width: 100px; height: 100px; background-color: red; } </style> <body> <div class="div1"></div> </body>
div中没有任何东西，会使用这个样式，为div内部添加内容后，该样式失效
:target 对页面上target元素制定样式，指定的样式会在用户点击并成功跳转后显示
<style> .div1{ height: 800px; background-color: lightgray; } :target{ background-color: red; } </style> </head> <body> <p><a href="#div1">click</a></p> <p><a href="#div2">click</a></p> <p><a href="#div3">click</a></p> <div class="div1"></div>
//这个div用来拉长页面，让跳转效果更明显 <div id="div1">content</div> <div id="div2">content</div> <div id="div3">content</div> </body>
//这个测试记得清缓存