后代选择器
<style>
        .nav a {
            color:red;
        }
    </style>
<div class="nav">
        <a href="#">内部链接</a>
        <a href="#">内部链接</a>
        <a href="#">内部链接</a>
    </div>

子元素选择器
<style>
        div>strong {
            color:red
        }
    </style>
<div>
        <strong>儿子</strong>
        <strong>儿子</strong>
        <strong>儿子</strong>
    </div>
    <div>
        <p>
            <strong>孙子</strong>
            <strong>孙子</strong>
            <strong>孙子</strong>

        </p>
    </div>

交集选择器
<style>
        p.red {
            color:red;
        }
    </style>
<p class="red">红色</p>
    <p class="red">红色</p>
    <p class="red">红色</p>
    <div class="red">红色</div>
    <div class="red">红色</div>
    <div class="red">红色</div>
    <p>蓝色</p>
    <p>蓝色</p>
    <p>蓝色</p>

并集选择器
<style>
        
        
        .nav,
        .sitenav {
            font: 20px "微软雅黑";
        }
        
    </style>
<div class="nav">
        <ul>
            <li><a href="#">公司首页</a></li>
            <li><a href="#">公司简介</a></li>
            <li><a href="#">公司产品</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    <div class="sitenav">
        <div calss="site-1">左侧导航栏</div>
        <div class="site-r"><a href="#">登录</a></div>
    </div>