473 字
2 分钟阅读
html – CSS 选择器

简介

CSS选择器

代码演示

<html>
    <head>
        <title>CSS 选择器</title>
        <style>
            span {
                color: #333
            }
            .cls {
                color: #06f
            }
            #i {
                color: #3f9
            }
        </style>
    </head>
    <body>
        
        <!-- 元素选择器 -->
        <!-- 无额外标签 -->
        <!-- 在引入 CSS 中无需添加任何前缀 -->
        <span>这里用的是元素选择器</span>
        <br>

        <!-- 类选择器 -->
        <!-- 使用class标签命名 -->
        <!-- 在引入 CSS 中需添加 . 作为前缀 -->
        <span class="cls">这里用的是类选择器</span>
        <br>

        <!-- id选择器 -->
        <!-- 使用id标签命名 -->
        <!-- 在引入 CSS 中需添加 # 作为前缀 -->
        <span id="i">这里用的是id选择器</span>
        <br>

        <!-- 多个选择器同时命中同一个元素的时候 -->
        <!-- 优先级: id选择器 > 类选择器 > 元素选择器 -->
        <span class="cls" id="i">多个选择器同时命中同一个元素</span>
    </body>
</html>

效果

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注