CSS基础知识（一）-基础选择器（标签选择器、类选择器、id选择器、通配符选择器）

概述
选择器可分为基础选择器和复合选择器两大类。
基础选择器由单个选择器组成
基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器

标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定同一的CSS样式。

语法：

  标签名 {
    属性1: 属性值1;
    …
  }

效果：

    <div>div1</div>
    <div>div2</div>
    <p>p1</p>
    <p>p2</p>
    <span>span1</span>
    <span>span2</span>
    <ul>
        <li>li1</li>
        <li>li2</li>
    </ul>

CSS：

        /* 标签选择器 */
        div {
            height: 50px;
            width: 200px;
            background-color: wheat;
        }

        span {
            background-color: pink;
        }

        p {
            color: powderblue;
        }

        ul li {
            width: 100px;
            border: 1px solid plum;
        }

类选择器
如果想差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器
类选择器在HTML中以class属性表示，在CSS中以 “.” 号显示。

语法：

  .类名 {
    属性1: 属性值1;
    …
  }

效果：

    <div class="top">div1</div>
    <div class="bottom red">div2</div>
    <span class="top">span1<span>
    <span class="bottom">span1<span>
    <ul>
        <li class="red">li1</li>
        <li>li2</li>
    </ul>

CSS：

        /* 类选择器 */
        .top {
            background-color: pink;
        }

        .bottom {
            background-color: powderblue;
        }

        .red {
            color: red;
        }

ID选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id元素，在CSS中以 “#” 号显示。

语法：

  #id名 {
    属性1: 属性值1;
    …
  }

效果：

    <div id="top">div1</div>
    <div id="bottom">div2</div>
    <ul>
        <li id="red">li1</li>
        <li>li2</li>
    </ul>

CSS:

        /* ID选择器 */
        #top {
            background-color: pink;
        }

        #bottom {
            background-color: powderblue;
        }

        #red {
            color: red;
        }

id选择器和类选择器的区别：

1. 类选择器（class）可以被一个或者几个标签使用
2. id选择器不能被重复使用
3. id选择器和类选择器最大的区别在于使用次数上
4. 类选择器在修改样式中使用最多，id选择器一般用于页面唯一性的元素，通常和JavaScript搭配使用

通配符选择器
在CSS中，通配符选择器使用 “*” 号定义，它表示选取页面中的所有元素（标签）
通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，通常用于清除所有元素的内外边距

        * {
            padding: 0;
            margin: 0;
        }

语法：

  * {
    属性1: 属性值1;
    …
  }

效果：

    <div>div1</div>
    <span>span1</span>
    <ul>
        <li>li1</li>
        <li>li2</li>
    </ul>

CSS：

        /* 通配符选择器 */
        * {
            color: red;
        }