当前位置:首页 » php学习笔记 » css---选择器的优先级(权重)

css---选择器的优先级(权重)

原创 stpevenchow 33°c 2019年10月04日 23:10 php学习笔记 0条评论
  移步手机端

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

选择器的优先级(权重)
        大致意思:同一个标签被不同类型的选择器指定加载的css样式属性相同 属性值不同就会产生冲突需要考虑选择器优先级(权重)问题
优先级基本原则:范围越大,优先级越低
 4种基本选择器的权重顺序
        id>class>类型>通配

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择器的优先级(权重)</title>图片.png    <style type="text/css">
        *{
            color: red;
        }    
        .div{
            color: pink;
            font-weight: bold;
        }

        #div{
            color: blue;
            font-weight: bold;
        }
        .div::after{
            content: "如果加入ID就变成蓝色";            color: blue;
        };

    </style>
</head>
<body>
    <div>
        <span class="div" id="">这个是粉红色</span>
    </div>
</body>
</html>

这个明显是如果插入id则id>class 如果不插入id则class>通配







继续进入

语法优先级

1、行内/内联样式,优先级最高,高于内部和外部样式
2、内部和外部样式,先看选择器类型,选择器类型不同按照4种基本选择器的优先级
3、如果内部和外部样式,选择器相同,看link标签和style标签在head标签当中的顺序,哪个标签在后,执行哪个标签的效果。

下面是代码展示第3条效果

css选择器的优先级.png














由于link这个外部样式在style内部样式的前面,所以style标签在后,显示style标签的

第二条也是一样

图片.png

今天选择器的优先级就先学习到这里

欢迎阅读本文,如果本文对您有所帮助,记得收藏/转发☺

本文链接:http://stpeven.com/post/124.html

版权声明:本文为原创文章,版权归 stpevenchow 所有,欢迎分享本文,转载请保留出处!

本文标签:

三人行,必有我师

评论(0)

发表评论:


【顶】 【踩】 【好】 【懵】 【赞】 【表情】

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

推荐阅读
10月14日

css-简单的调查表单制作

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 7次
css-简单的调查表单制作

     拿到种类型的表单过后,我们首先要分析,这个表单大致的要涉及到html哪些标签属性,从表面上来看,这个表格大概是由3个部分组成,主题,标题,内容,把这3个确定好了过后,后面就是直接调用css样式了。下面直接放出代码    <!DOCTYPE html><html><head>    <meta charset="utf...

标签 :