CSS3伪类选择器之结构选择器root，not，empty，target

最新推荐文章于 2024-04-14 14:37:54 发布

HeLang_qrf

最新推荐文章于 2024-04-14 14:37:54 发布

阅读量799

点赞数 1

分类专栏： CSS3伪类选择器小应用文章标签：伪类选择器 not empty root target

本文链接：https://blog.csdn.net/hl582567508/article/details/52078529

版权

CSS3伪类选择器小应用专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3的结构性伪类选择器</title>
    <!--root-->
    <style>
        :root{
            background-color: darkgray;
        }
        body{
            background-color: #a6e1ec;
        }
        /*当使用了root则body支队当前包含内容的块改变
          背景颜色，否则整个页面背景颜色改变*/
        /*not:让当前节点的子元素不使用当前节点样式*/
        div *:not(h1){
            color: chocolate;
        }
        /*empty:来指定当前样式中指定内容为空时的样式*/
        :empty{
           background-color: #4cae4c;
        }
        /*target:改变被选中的模块的样式*/
        :target{
            background-color: #c0a16b;
        }
    </style>
</head>
<body>
<div>
    <h2>你好吗？</h2>
    <h1>这里是个标题</h1>
    <p>这里是个P标签</p>
</div>
<table border="1">
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr><tr>
        <td>内容1</td>
        <td></td>
    </tr><tr>
        <td></td>
        <td>内容2</td>
    </tr><tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
</table>
<a href="#01">01</a>|
<a href="#02">02</a>|
<a href="#03">03</a>|
<a href="#04">04</a>
<br/>
<div id="01">01</div>
<div id="02">02</div>
<div id="03">03</div>
<div id="04">04</div>
</body>
</html>