css 基本选择器

优先级：id>class>标签

1、标签选择器

会选择到页面上所有页面的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*标签选择器，会选择到页面上所有页面的元素
    */
        h1{
        color: #a13d30;
        background: #3cbda6;
        border-radius: 24px;
        }
        p{
        font-size:80px;
        }
    </style>


</head>
<body>

<h1>学Java</h1>
<h1>学Java</h1>
<p>听狂神说</p>

</body>
</html>

2、类选择器

多个标题可以归类，是同一个class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的格式 .class的名称{}
        多个标题可以归类，是同一个class

        */
        .asd{
        color: #3748ff;
        }
        .zxc{
        color: #a24fff;
        }
    </style>

</head>
<body>

<h1 class="asd">标题1</h1>
<h1 class="zxc">标题2 </h1>
<h1 class="asd">标题3</h1>

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

3、id选择器

id必须全局唯一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        id选择器  id必须全局唯一
        #id名称{}
        */
        #asd{
        color: #ff008a;
        }
        .zxc{
        color:02ff00;
        }
    </style>

</head>
<body>

<h1 id = "asd">标题1</h1>
<h1  class="zxc">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>


</body>
</html>
posted @ 2021-08-14 18:19  micer  阅读(40)  评论(0)    收藏  举报