css选择器的优先级

最新推荐文章于 2024-09-28 18:51:04 发布

猫与猫寻

最新推荐文章于 2024-09-28 18:51:04 发布

阅读量90

点赞数

分类专栏：前端html 文章标签： html css

本文链接：https://blog.csdn.net/a1399028618/article/details/118516461

版权

前端html 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文探讨了HTML文档中内联样式、内部样式和外部样式的应用，通过示例展示了不同样式规则对文本颜色的影响。同时，解释了CSS选择器的优先级规则：ID选择器 > 类选择器 > 标签选择器，并给出了实例展示如何应用这些规则来改变页面元素的样式。

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

在这里<p style="color: red;">林志玲嫁给了一个日本人</p>
    <p style="color: red;">苍老师是一个日本人</p>
    <p style="color: red;">波波姐也是一个日本人</p>插入代码片

    <title>css简介与引入</title>
    <style>
        /* 内部样式 */
        /* 将元素的样式规则用style标签插入到当前html文档中
           这个样式规则，仅用于当前的html文档 
         */
        
        p {
            color: red;
        }
    </style>
</head>

<body>
    <!-- 内敛样式：将元素的样式使用style属性 应用到当前元素，只适用于当前标签 -->

    <p>林志玲嫁给了一个日本人</p>
    <p>苍老师是一个日本人</p>
    <p>波波姐也是一个日本人</p>
</body>

在这里插入图片描述

    <style>
        /* 内部样式 */
        /* 将元素的样式规则用style标签插入到当前html文档中
           这个样式规则，仅用于当前的html文档 
         */
        
        p {
            color: green;
        }
    </style>
</head>

<body>
    <!-- 内敛样式：将元素的样式使用style属性 应用到当前元素，只适用于当前标签 -->

    <p>林志玲嫁给了一个日本人</p>
    <p style="color: blue;">苍老师是一个日本人</p>
    <p>波波姐也是一个日本人</p>
</body>

在这里插入图片描述
内联样式 > 内部样式 > 外部样式
style="" style <> css文档

    <style>
        /* id选择器
         */
        
        #red {
            color: red;
        }
        /* 类选择器 */
        
        .green {
            color: green;
        }
        /* 标签选择器 */
        
        p {
            color: aqua;
        }
    </style>
</head>

<body>
    <!-- 选择元素只会三种可能；
    1.找到了；双会有二种可能，找到一个，找到了一批
    2.没找到；第一张选择语法错误，第二是页面中不存在选择器匹配的元素 -->
    <p id="red">买了MacBook的同学，后悔了吗</p>
    <p class="green" id="red">原来CSS非常简单</p>
    <p class="green">做一个快乐的学习者</p>

</body>