一、四种基本选择器

1.通配符选择器 选择所有的标签
2.标签选择器 选择特定的标签
3.类名选择器 选择拥有类名的标签
4.id选择器 选择拥有id并且值匹配的比标签

二、五种符号选择器

1.逗号选择器 满足逗号左边 或者右边
案例如下：

css样式：
.p1,.p2,.p3{
            color: aqua;
        }

代码：
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>

2.空格选择器 满足嵌套关系 空格后面是空格前面的子孙元素
案例如下：

css样式：
.big-font span{
            font-size: 200px;
        }

代码：
<div class="big-font">
        <p>
            <span>大字体</span>
        </p>
</div>

3.大于号选择器 满足嵌套关系 大于号后面是大于号前面的直接子元素
案例如下：

css样式：
.small-font>span{
            font-size: 50px;
        }

代码：
<div class="small-font">
        <span>小字体</span>
        <p><span>正常字体</span></p>
</div>

4.加号选择器 满足并列关系 加号后面元素紧邻加号前面
案例如下：

css样式：
.next>span+span{
            color: green;
        }

代码：
<div class="next">
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
</div>

5.波浪号选择器 满足并列关系 波浪号后面满足条件元素
案例如下：

css样式：
.nextall span~a{
            color: violet;
       }

代码：
 <div class="nextall">
        <span class="span5">span5</span>
        <span class="span6">span6</span>
        <a href="">百度</a>
        <span class="span7">span7</span>
        <a href="">百度</a>
        <a href="">百度</a>
        <span class="span8">span8</span>
        <a href="">百度</a>
        <span class="span9">span9</span>
</div>

三、六种属性选择器

1.[属性名]{} 拥有属性名的标签

案例：
/* 拥有属性title的元素 表现为红色 */
        [title]{
            color: red;
        }

2.[属性名=值]{} 拥有属性名并且值匹配的标签

案例：
 /* 拥有属性title并且值是t2的元素 表现为绿色 */
        [title="t2"]{
            color: green;
        }

3.[属性名^=val]{} 拥有属性名并且值以val开头的标签

案例：
/* 拥有属性title并且值以t开头的元素 背景颜色为蓝色*/
        [title^="t"]{
            background-color: lightblue;
        }

4.[属性名$=val]{} 拥有属性名并且值以val结尾的标签

案例：
/* 拥有属性title并且值以3结尾的元素 字体大小为50px */
        [title$="3"]{
            font-size: 50px;
        }

5.[属性名=val]{} 拥有属性名并且值包含val内容*

案例：
/* 拥有属性class并且值包含span的元素 颜色为浅蓝 */
        [class*="span"]{
            color: aqua;
        }

6.[属性名~=val]{} 拥有属性名并且值其中一个等于val

案例：
/* 拥有属性class并且其中一个值等于span5 颜色为黑色 字体大小为30px */
        [class~="span5"]{
            font-size: 30px;
            color: black;
        }