1.标签选择器(选择同一类的全部标签)

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


    <style>
/*
标签选择器会选择到页面上所有的这个标签都进行一样的操作
*/        h1{
            color:red;
            background: aquamarine;
            border-radius: 24px;

        }
        p{

            font-size: 80px;
        }

    </style>


</head>
<body>


<h1>我是标题</h1>
<h1>我也是标题</h1>
<p>我是段落</p>



</body>
</html>

2.类选择器(选择所有class属性一致的标签,可以跨标签使用)

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

    <style>
        /*
        类选择器的格式 .class{}
        优点:可以把多个标签进行归类,从而实现对相同标签中的不同对象实现不同的操作,
        也可以使不同标签进行相同的操作
        */
        
        .class01{
            color: aqua;
        }
        .class02{
            color: darkmagenta;
        }
        .class03{
            color: deeppink;
        }

    </style>

</head>
<body>

<h1 class="class01">我是标题</h1>
<h2 class="class02">我也是标题</h2>
<h3 class="class03">我还是标题</h3>

<p class="class01">

    我跟他们不一样,我是段落

</p>


</body>
</html>

3.id选择器(全局唯一)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /*
        id 选择器 : 和class不同,id必须保证全局唯一
        语法:
        #id名称{}
        优先级:
            不遵循就近原则,固定
            id选择器 > class选择器 > 标签选择器
        */
        #id选择器{
            color: deeppink;
        }
        .类选择器{
            color: aqua;
        }
        h1{
            color: cornflowerblue;
        }

    </style>
</head>
<body>

<h1 id="id选择器">标题1</h1>
<h1 class="类选择器">标题2</h1>
<h1>标题3</h1>
<h1 class="类选择器">标题4</h1>
<h1 class="类选择器">标题5</h1>
<h1>标题6</h1>




</body>
</html>

优先级:id选择器 > class选择器 > 标签选择器

posted on 2020-11-30 09:56  凌落宸  阅读(31)  评论(0编辑  收藏  举报