选择器

选择器

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

基本选择器

1、标签选择器：选择一类标签

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

    <style>
        /*标签选择,会选择到页面上所有的这个*/
        h1{
            color: #669c46;
            background: aquamarine;
            border-radius: 11px;
        }
        p{
            font-size: 80px;
        }
    </style>

</head>
<body>

<h1>杨不悔</h1>
<h1>杨不悔</h1>
<p>yangbuhui</p>

</body>
</html>

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

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

    <style>
        /*类选择器的格式 .class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .yangbuhui{
            color: coral;
        }
        .buhui{
            color: deepskyblue;
        }
    </style>

</head>
<body>

<h1 class="yangbuhui">杨不悔</h1>
<h1 class="buhui">杨不悔</h1>
<h1 class="yangbuhui">杨不悔</h1>

<p class="buhui">杨不悔</p>

</body>
</html>

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

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

    <style>
        /* id选择器 ：id必须保证全局唯一！
            #id名称{}
            不遵循就近原则，固定的
            id选择器 >class选择器 >标签选择器
         */
        #yangbuhui{
            color: cornflowerblue;
        }
        .style1{
            color: gold;
        }
        h1{
            color: hotpink;
        }

    </style>

</head>
<body>

<h1 class="style1" id="yangbuhui">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

优先级：id>class>标签

posted @ 2022-03-01 00:17  少时凌云志  阅读(104)  评论(0)    收藏  举报