交集选择器：选择特定的标签进行设置样式，并且是两个选择器共同拥有的内容。如：

<style>
        div.box {
            color: red;
        }
    </style>
并集选择器：选择所有指定的选择器内容，可以指定多个的，它们之间使用英文逗号分隔。如：
<style>
        div,.box,p.box,#box {
            color: red;
        }
    </style>
相邻兄弟选择器：标签1+标签2，对标签2进行设置，且标签1和标签2是紧挨着的，是在标签1完成之后。如：
<style>
        div + p {
            color: red;
        }
    </style>
通用的兄弟选择器：标签1~标签2，标签2是包含在标签1里面的，对标签1里的标签2进行设置。如：
<style>
        div ~ p {
            color: red;
        }
    </style>
伪类选择器-hover：以：开头的一种选择器，鼠标移到元素上时会自动触发的效果，需要配合其他选择器一起使用。如：
<style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
        }
        .box:hover {
            cursor: pointer;
            background-color: red;
        }
    </style>
伪类选择器之first/last-child：可以选择外标签里的第一个内标签和最后一个内标签。如：
<style>
        ul>li {
            list-style: none;
        }
        li:first-child {
            color: red;
        }
        li:last-child {
            color: rebeccapurple;
        }
</style>
伪类选择器之before And after：在框上的左上角和右下角形成一个红色小尖。如：
<style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
            position: relative;
        }
        .box:before {
            content: "";
            width: 10px;
            height: 10px;
            border-top: 1px solid red; 
            border-left: 1px solid red; 
            position: absolute;
            left: -1px;
            top: -1px;
        }
        .box:after {
            content: "";
            width: 10px;
            height: 10px;
            border-right: 1px solid red;
            border-bottom: 1px solid red;
            position: absolute;
            right: -1px;
            bottom: -1px;
        }
</style>