选择器优先级的权值与计算

Waste~

于 2020-11-16 23:17:26 发布

阅读量161

点赞数

文章标签：涛思数据

本文链接：https://blog.csdn.net/Mr_box_/article/details/109732383

版权

一.在HTML中常见选择器有：
行内选择器、标签选择器、id选择器、类选择器（class）
选择器权值

标签选择器：权值为1

类选择器和伪类：权值为10

ID选择器：权值为100

通配符选择器：权值为0

行内样式：权值为1000

当权值相同时，遵循就近原则。
行内选择器：通过style将样式直接写在标签里面：
格式为：style=“属性1:属性值1；属性2:属性值2；…”
例如：<p style=”color: red;font-size: 32px;”>啊啊啊啊

注意：最后一个属性值后面的分号可以省略，其他的属性与属性之间必须要有分号分开；现在行内选择器也比较少用，原因是比较繁琐，代码比较少可以考虑使用，但是代码一多，就很不好用了

标签选择器：就是利用标签名通过内部样式将标签+样式给表现出来；
格式：标签{ 样式1；样式2；…}
例如：

<html>
<head>
    <title>标签选择器</title>
    <style type="text/css">
        p{
            color:green;
            font-size:14px;
        }
    </style>
</head>
<body>
    <p>啊啊啊</p>
</body>
</html>

注意：标签选择器：运用范围是：标签的样式是同一格式的范围情况下，比较适用，但在同一标签多种样式的情况下不适合适用；

id选择器：在标签内定义一个id=“idname”，在内部样式中使用:#idname{样式}的方式使用id选择器。

类选择器（class）：在标签内定义一个class=“classname”，在内部样式中使用: .classname{样式}的方式使用id选择器。

行内样式：写在标签里面通过style=“属性1：属性值1；….”的方式改变标签样式；例如

<p style="color:red">啊啊啊</p>

优先级：
**id选择器>标签选择器
行内样式>id选择器
类选择器>标签选择器
id选择器>类选择器
即
行内样式（最高级）>id选择器>类选择器>标签选择器
**
例子：
类选择器与标签选择器的优先级：

<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML选择器的优先级</title>
        <style type="text/css">
            p{
                color: green;/*绿色*/
            }

            .blue{
                color: blue;/*蓝色*/
            }
            #red{
                color: red;/*红色*/
            }
        </style>
    </head>
    <body>
        <h3>望庐山瀑布</h3>
        <p >日照香炉生紫烟，</p>
        <p class="blue">遥看瀑布挂前川。</p>
        <p class="blue" id="red">飞流直下三千尺，</p>
        <p class="blue" id="red" style="color: black;">疑是银河落九天。</p>
    </body>
</html>

Waste~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择器优先级的权值与计算

一.在HTML中常见选择器有：行内选择器、标签选择器、id选择器、类选择器（class）选择器权值标签选择器：权值为1类选择器和伪类：权值为10ID选择器：权值为100通配符选择器：权值为0行内样式：权值为1000当权值相同时，遵循就近原则。行内选择器：通过style将样式直接写在标签里面：格式为：style=“属性1:属性值1；属性2:属性值2；…”例如：<p style=”color: red;font-size: 32px;”>啊啊啊啊注意：最后一个属性值后面的分号
复制链接

扫一扫