CSS系列之基础选择器/标签选择器/类选择器/ID选择器

最新推荐文章于 2024-09-04 20:25:56 发布

DOGIOOH

最新推荐文章于 2024-09-04 20:25:56 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： JavaWeb

本文链接：https://blog.csdn.net/yinyanyao1747/article/details/92851341

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS系列之基础选择器

01 标签选择器

HTML标签作为标签选择器的名称【
…

】

格式：

标签选择器 {属性：属性值；}

02 类选择器

格式

<标签名 class = "类名称">标签内容</标签名>

.class{属性：属性值；}

程序示例

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

    <style>

        /*   类选择器
          类在标签中定义, 使用class属性
          然后使用类选择器选择到指定的标签元素

          .类名称{
               属性:属性值
          }

        */

        .a{
            font-family: "Droid Sans Mono Dotted";
            font-size: 80px;
        }

        .b{
            font-family: Bahnschrift;
            font-size: 80px;
        }

    </style>

</head>
<body>


<p class="a">I can do all things </p>
<a href="" class="b">I can do all things</a>


</body>
</html>

运行结果

03 ID选择器

格式

<标签名 id = "id名称">标签内容</标签名>

#id{属性；属性值；}

程序示例

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

    <style>


        /*id属性全局唯一 , 不能同名*/
        /*ID选择器
        1.在标签中定义ID
        2.在style标签中定义id元素的样式:

        #id名字{
            属性：属性值；
        }

        */

        .a{
            font-size: 80px;
        }

        #b{
            font-size: 100px;
        }


    </style>


</head>
<body>


<p id="b">1</p>
<a href=""  class="a">2</a>




</body>
</html>

运行结果

04 基础选择器的优先级

基础选择器不遵循“就近原则”：ID选择器>类选择器>标签选择器

程序示例

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

    <style>

        /*类选择器*/
        .test1{
            color: blue;
        }
        /*标签选择器*/
        h1{
            color: red;
        }
        /*ID选择器*/
        #test2{
            color: green;
        }


    </style>


</head>
<body>


<h1 class="test1" id="test2">I can do all things</h1>

</body>
</html>