选择器之三种基本选择器★★★★

选择器★★★★

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

2.1 三种基本选择器

1、标签选择器

标签选择器：会选择到页面上所有这个标签的元素，缺点亦为如此：无法做到只改变单个标签的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器学习</title>


    <style>
     /*标签选择器：会选择到页面上所有这个标签的元素*/
        h1{
            color : red ;
            background : wheat;
            border-radius : 12px;
        }
        p{
            font-size : 50px;
        }
    </style>

</head>
<body>

<h1>标签选择器测试1</h1>
<h1>标签选择器测试2</h1>
<p>标签选择器测试3</p>

</body>
</html>

2、类选择器 class

需要注意的是：类名可以重复，不能是汉字或者数字！！！！！

代码学习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器学习</title>

    <style>
        /*类选择器格式： .class的名称{}
        优点是可以将多个标签进行归类，可以跨标签归为同一类（例如可以将标题标签和段落标签归为同一类）分门别类得进行样式处理
        */
        .x{
            color : red ;
        }
        .xy{
            background : wheat ;
        }
        .xyz{
            background : pink;
            border-radius : 30px;
        }

    </style>

</head>
<body>

<h1 class="x">标题1</h1>
<h1 class="xy">标题2</h1>
<h1 class="xyz">标题3</h1>
<p class="xyz">无关风月，我题序等你回</p>

</body>
</html>

知识点总结：

标签类名不能是数字或者汉字！！！
类选择器格式为： .class{}
类选择器优点：可以将多个标签进行归类，可以跨标签归为同一类（例如可以将标题标签和段落标签归为同一类）分门别类得进行样式处理

3、id选择器

需要注意的是：id具有全局唯一性不可重复，可以是汉字或者数字，这一点要区分于类

代码学习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器学习</title>

    <style>
        /*id选择器 ： id必须保证唯一性
        格式： #id名称{}
        选择器优先级：id 选择器>class 选择器>标签选择器
        */
        #xyz1{
            color : red;
        }
        #我{
            background : yellow;
            border-radius : 20px;
        }
        #x{
            color : gray;
        }
        #xy{
            color : blue;
        }
        .style1{
            color : yellow;
        }
        h1{
            color : black;
        }

    </style>
</head>
<body>

<h1 id="x" class="style1">标题一</h1>
<h1 id="xy" class="style1">标题二</h1>
<h1 id="我">标题三</h1>
<h1 id="xyz1">标题四</h1>
<h1>标题五</h1>

</body>
</html>