一、Google案例


代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> span {
            font-size: 100px;
        }
        .blue {
            color: blue;
        }
        .red {
            color: red;
        }   
        .orange {
            color: orange;
        }
        .green {
            color: green;
        }
    </style>
</head>
<body>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>
</html>

二、多类名选择器

  • 样式显示效果跟HTML元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关。
  • 各个类名中用空格隔开。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .font20 {
        font-size: 20px;
    }
    .font14 {
        font-size: 14px;
    }
    .pink {
        color: pink;
    }
    </style>
</head>
<body>
    <div class="font20 pink">炒酸奶</div>
    <div class="font20">小龙虾</div>
    <div class="font20">纯牛奶</div>
    <div class="font14 pink">奶茶</div>
    <div class="font14">芒果</div>
    <div class="font14">西瓜</div>
</body>
</html>

三、id选择器

  • 该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法基本和类选择器相同。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .feng {
        color:red;
    }
    #kp {
        color:yellowgreen;
    }
    #wq {
        color: blue;
    }
    </style>
</head>
<body>
    <div class="feng">疾风剑豪</div>
    <div id="kp">卡牌大师</div>
    <div id="wq">武器大师</div>
</body>
</html>
  • id选择器和类选择器的区别
    class选择器可以有多个，但id选择器只能有一个。
四、通配符选择器(不常用)

通配符选择器用"*"号表示，是所有选择器中作用范围最广的，能匹配页面中所有的元素，基本语法格式如下：

*{属性1：属性值1；属性2：属性值2；属性3：属性值3}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * {
        color: red;
    }
    </style>
</head>
<body>
    <p>早上好</p>
    <div>中午好</div>
    <span>晚上好</span>
    <em>多喝热水</em>
    <strong>多喝烫水</strong>
    <h1>多喝岩浆</h1>
</body>
</html>