• 技术文章 >web前端 >css教程

    css选择器优先级顺序是什么?css基本选择器优先级的介绍

    不言不言2018-09-28 10:05:20原创17692
    css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容。

    在看css选择器优先级顺序前,我们先来简单说说css基本选择器有哪些?

    1、标记选择器(如:body,div,p,ul,li)

    2、id选择器(如:id="name",id="name_txt")

    3、类选择器(如:id="name",id="name_txt")

    4、后代选择器(如:#head .nav ul li 从父集到子孙集的选择器)

    5、子元素选择器(如:div>p ,带大于号>)

    6、伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

    看完了基本的css选择器类型后,我们接着来看一下css优先级的概念。

    当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,用到谁的值谁的优先级就高。

    我们来看一下css选择器优先级的算法:

    每个规则对应一个初始"四位数":0、0、0、0
    若是 行内选择符,则加1、0、0、0
    若是 ID选择符,则加0、1、0、0
    若是 类选择符/伪类选择符,则分别加0、0、1、0
    若是 元素选择符,则分别加0、0、0、1
    算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。  

    看完了上述内容,那我们就来看看css选择器优先级的具体排序。

    css选择器优先级最高到最低顺序为:

    1.id选择器(#myid)

    2.类选择器(.myclassname)

    3.标签选择器(div,h1,p)

    4.子选择器(ul < li)

    5.后代选择器(li a)

    6.伪类选择(a:hover,li:nth-child)

    最后,需要注意的是:  

    !important的优先级是最高的,但出现冲突时则需比较”四位数“;
    优先级相同时,则采用就近原则,选择最后出现的样式;
    继承得来的属性,其优先级最低。

    以上就是本篇文章的全部内容,关于css选择器当然不止上述的六个选择器,更多css选择器的内容可以参考css使用手册

    以上就是css选择器优先级顺序是什么?css基本选择器优先级的介绍的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 选择器 优先级
    上一篇:如何使用纯CSS实现电源开关控件(附源码) 下一篇:如何使用HTML5+css3制作出12种常用的按钮开关样式(附完整代码)
    千万级数据并发解决方案

    相关文章推荐

    • CSS教程之css选择器 、属性、值_基础教程• 对CSS选择器优先级(权重)的认识• CSS选择器种类及及其使用介绍• CSS选择器总结• CSS选择器优先级详细介绍• CSS选择器详解
    1/1

    PHP中文网