CSS三种基本选择器

最新推荐文章于 2025-02-28 17:35:43 发布

原创最新推荐文章于 2025-02-28 17:35:43 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了CSS中选择器的优先级，详细讲解了id选择器、class选择器和标签选择器的用法。通过实例展示了如何使用这三种选择器来设置不同级别的样式，强调了id选择器的最高优先级，然后是class选择器，最后是标签选择器。同时，还探讨了如何利用这些选择器进行更精确的样式控制。

三种基本选择器的优先级： id > class > 标签

标签选择器

选择一类标签
标签{}

    <style>
        h1{
            color: green;
        }
    </style>

类选择器：

选择所有class属性一致的标签，跨标签
.class名称{}

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

    <style>
        /* 类选择器格式  .class文件名称{}
           好处：可以多个标签归类，是同一个class
        */
        .one{
            color: red;
        }
        .two{
            color: green;
        }
        .three{
            color: yellow;
        }
    </style>

</head>
<body>

<h1 class="one">标题一</h1>
<h1 class="two">标题二</h1>
<h1 class="three">标题三</h1>

</body>
</html>

id 选择器：

全局唯一
#id名{}

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

    <style>
        /* id选择器 :id必须保证全局唯一
           #id名称{}
           优先级：id > class > 标签
        */
        #one{
            color: yellow;
        }
        #two{
            color: green;
        }
        #three{
            color: red;
        }
    </style>

</head>
<body>

<h1 id="one">标题一</h1>
<h1 id="two">标题二</h1>
<h1 id="three">标题三</h1>

</body>
</html>