掌握网页元素选择：标签、类与id的选择器-优快云博客

一、选择器

作用：选择页面上的某一个或者某一类元素。

二、基本选择器

标签选择器：选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: aquamarine;
            background: blue;
            border-radius: 24px;
        }

        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>Hello Massimo!</h1>
<h1>Hello Massimo!</h1>
<p>你好，马西莫</p>
</body>
</html>

效果：
在这里插入图片描述

类选择器:选择所有class属性一致的标签，跨标签， .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式   .class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .Massimo{
            color: #a232be;
        }

        .Vermouth{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 class="Massimo">标题1</h1>
<h1 class="Vermouth">标题2</h1>
<h1 class="Massimo">标题3</h1>

<p class="Massimo">p标签</p>
</body>
</html>

效果：
在这里插入图片描述

id选择器：全局唯一！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器  ： id必须保证全局唯一！
        #id名称{}*/
        #Massimo{
            color: #a232be;
        }
    </style>
</head>
<body>
<h1 id="Massimo">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>