部分选择器

1）交集选择器（对同时拥有选择器中的内容进行选择）

如：<style> div.box {  } </style>

就是对同时拥有div和box的内容进行选择。

2）并集选择器（只要含有就对其选中【可以有多个但必须用英文的逗号隔开】

如：<style>div,.box { }</style>

就是对拥有div与box的内容进行选中。

3）相邻兄弟选择器（用于完成选择与某标签相邻的某标签）

如：<style>div + p { }</style>

就是对与div相邻的并且在div后的p标签。{注：改标签只会选中在其之后且相邻的标签}

4）通用的兄弟选择器（用于完成选择某标签的全部的某兄弟标签）

如：<style>div + p { }</style>

就是选中div的所有兄弟标签p。{注意：仍然只会选择其后的所有指定的兄弟标签}

5）伪类选择器（伪类选择器是以:开头的选择器。伪类选择器需要配合其它选择器一起使用。）

用此类选择器需要设置一个class后命名的.xxx

平时我在使用时用的是div.box并按tab键快捷建一个<div class="box"></div>
   
    1>:hover （表示鼠标移到元素上时会自动触发的效果。）

如：    .box {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
        }
        .box:hover {
            cursor: pointer; /*鼠标指针*/
            background-color: red;
        }

就是当鼠标移到div上时，背景颜色变为红色，同时鼠标指针变为小手形状

2>first-child

在平时练习中我用来联系该选择器的方式为ul>li*n，n为你想要创建多少的个li标签并且可以用
 list-style: none; 去掉li前面的小圆点
如：first-child用于选择第一个子节点

last-child用于选择最后一个字节点

nth-child用于选择第n个节点（n>=0）

3>beforeAndafter

目前我用该标签来对<div.box>的边角进行添加红线尖

代码如下：

        .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;
        }

红色部分是用于调整红色尖的位置（注意：在.box中一定要加一个position且.box一定要设置relative，在样式设计中一定要设置position:和absolute）