h5与c3权威指南笔记--css3结构性伪类选择器root,not,empty,target

文章地址 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>
  //这个测试记得清缓存
上一篇:Eclipse安装教程 ——史上最详细安装Java &Python教程说明


下一篇:Java语法糖初探(三)--变长参数