3.1基本选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_61783164/article/details/121910439

这篇博客介绍了CSS中三种基本的选择器：元素选择器、类选择器和ID选择器，并展示了它们在HTML文档中的应用。同时，解释了选择器的优先级规则，ID选择器的优先级高于类选择器，类选择器又高于元素选择器。示例代码演示了如何通过这些选择器设置不同元素的颜色，并且展示了当多个选择器同时作用于一个元素时的样式覆盖情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【1】代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
        /*
            【1】基本选择器：原色选择器：
            通过原色的名字进行限定为，他会获取页面上所有这个元素，无论藏得多深，都会被获取到
            格式：
            元素名字{
                css样式;
            }
        
        **/
            h1{
                color: red;
            }
            i{
                color: #0000FF;
            }
            /*
            【2】基本选择器：类（class）选择器：
            应用场合：不同类型的标签使用相同的类型
            格式：
            .class的名字{
                css样式;
            }
            */
           .mycls{
               color: #7FFF00;
           }
           
           /*
            【3】基本选择器：id选择器：
            应用场合：可以定位唯一的一个元素
            不同的标签确实可以使用相同的id，但一般我们会进行认为的控制，让id是可以唯一定位到一个原色
            格式：
            #id名字{
                css样式;
            }
           */
          #myid{
              color: brown;
          }
        </style>
    </head>
    <body>
        <h1>我是<i>一个</i>标题</h1>
        <h1>我是一个标题</h1>
        <h1  class="mycls">我是一个标题</h1>
        <h1>我是一个标题</h1>
        <h2>我是h2标题</h2>
        <h2 class="mycls">我是h2标题</h2>
        <h2>我是h2标题</h2>
        <h2 id="myid">我是h2标题</h2>
    </body>
</html>

【2】优先级别：

id选择器>class选择器>元素选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
        .mycls{
            color: #FF0000;
        }
        #myid{
            color: #0000FF;
        }
        h1{
            color: green;
        }
        </style>
    </head>
    <body>
            <h1 class="mycls" id="myids">
                我是标题
            </h1>
    </body>
</html>