CSS三种基本选择器

最新推荐文章于 2023-08-09 08:38:26 发布

异色小世界

最新推荐文章于 2023-08-09 08:38:26 发布

阅读量248

点赞数

分类专栏： # css 文章标签： css

本文链接：https://blog.csdn.net/lixingecho/article/details/113725360

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

三种基本选择器的优先级： 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>

异色小世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三种基本选择器

三种基本选择器的优先级： id > class > 标签标签选择器选择一类标签标签{} <style> h1{ color: green; } </style>类选择器：选择所有class属性一致的标签，跨标签.class名称{}<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录