css_1_选择器_基本选择器

基本选择器包括：通配选择器，元素选择器，类选择器，id选择器

一. 通配选择器

• 作用：定位页面中的所有元素，并为其设定样式（实际上用的很少）
• 结构：

*{属性名：属性值}

• 举例：

    <style>
        * {
            color: blueviolet;
            font-size: 60px;
        }
    </style>

二.元素选择器

• 作用：根据标签名，定位页面中的某一类元素，统一设置样式。
• 结构：

标签名{
属性名：属性值；
}

• 举例：

    <style>
        /* 选中所有h1元素 */
        h1 {
            color: aqua;
            font-size: 40px;
        }
    </style>

• 注意：是统一设置，无法差异化。

三.类选择器

• 作用：根据元素的类名（class值），来为这些元素设置样式。
• 结构：

.类名{ 属性名：属性值；}

• 举例：

    <style>
    /* 选中所有class值为sentence的元素 */
        .sentence {
            color: blue;
            font-size: 50px;
        }
    </style>

    <p class="sentence">
        这是在说类选择器
    </p>

• 注意：

1.类选择器前要加一个 .
2.类名（class值）
不可以用：纯数字、中文
尽量用英文与数字的组合，命名要有意义。
如果有多个单词，用 - 做连接，举例：right-menu
3.一个元素不能写多个class属性，否则后写的会失效。
4.一个元素的class属性，可以有多个值，中间用空格隔开。

四.ID选择器

• 作用：根据ID名，选中某一个元素，设置样式。
• 结构：

#id名{属性名：属性值；}

• 举例：

    <style>
        #option {
            color: brown;
            font-size: 40px;
        }
    </style>

    <h1 id="option">
        这是在说id选择器
    </h1>

• 注意：
  1.id值的命名：
  字母、数字、下划线、短杠组成
  尽量使用字母开头，区分大小写
  不包含空格，不要用标签名。
  2.id值是唯一的，多个元素的id值不能相同。
  3.一个元素可以同时拥有id值和class值。

五.总结

1. 通配选择器
   选择所有标签
2. 元素选择器
   选择同种标签，但不能差异化
3. 类选择器
   选择所有指定class值的标签，可以差异化（常用）
4. ID选择器
   选择一个指定的id值的标签，id值是唯一的。