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

你的名字 2021-01-30 17:10 797阅读 0赞

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选择器优先级顺序是什么？css基本选择器优先级的介绍的详细内容，更多请关注我！！！！

[css]: http://dandelioncloud.cn/css-web/index.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，797人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是css选择器

css[选择器][Link 1]在css的学习中无疑是十分重要的，所以，什么是css选择器？css选择器有哪些类型？这是我们必须要掌握的，本篇文章将给大家来介绍关于css选择器

素颜马尾好姑娘i/ 2024年03月27日 12:29/ 0 赞/ 72 阅读

相关什么是css选择器

![761b1c76cff8ebfd13bc86bc86aec082.jpeg][] css[选择器][Link 1]在css的学习中无疑是十分重要的，所以，什么是css选择

妖狐艹你老母/ 2024年03月26日 14:30/ 0 赞/ 69 阅读

相关 CSS选择器优先级

<table> <thead> <tr> <th>选择器</th> <th>权重</th> </tr> </thead> <tbody>

短命女/ 2023年07月13日 13:45/ 0 赞/ 33 阅读

相关 CSS选择器优先级

先看图，基本上已经清楚了 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

比眉伴天荒/ 2023年06月27日 06:21/ 0 赞/ 30 阅读

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

CSS选择器是编写CSS代码时的一个核心概念，我们在设计网页页面时，使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。而HTML页面

叁歲伎倆/ 2022年11月11日 05:28/ 0 赞/ 229 阅读

相关 CSS选择器相关以及CSS选择器的优先级

首先，当我们给css中的选择器设定样式后，有一些属性并没有起作用。通过FireBug查看发现一些属性被覆盖了。那么CSS的优先级是如何的呢？在CSS中，基本选择器诸如 id

偏执的太偏执、/ 2022年08月19日 02:18/ 0 赞/ 273 阅读

相关 CSS的选择器，优先级

1.基础的选择器 <table> <tbody> <tr> <td> <p>选择器</p> </td> <td> <p>含义</p> </td>

太过爱你忘了你带给我的痛/ 2022年07月19日 00:28/ 0 赞/ 278 阅读

相关 css选择器优先级

最初接触css选择器优先级这一块的内容的时候，是以下面这张图为准： ![css选择器优先级][css] ，按照上图进行计算，但是我昨天看了一篇文章发现这样算是错误的。文

约定不等于承诺〃/ 2022年05月15日 17:59/ 0 赞/ 323 阅读

相关 CSS选择器优先级

规则1： id选择器 > class选择器 > 标签选择器规则2：行内样式 > 内部样式 == 外部样式 > 注： > > 1. 选择器相同的情况下，离

野性酷女/ 2022年01月28日 22:41/ 0 赞/ 349 阅读

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

css的选择器有很多种，那么，自然而然的就会有优先级这一概念出现，所以，css选择器优先级顺序是怎样的呢？本篇文章将来给大家介绍css选择器优先级的排序，话不多说，我们来...

你的名字/ 2021年01月30日 17:10/ 0 赞/ 798 阅读