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

你的名字 2021-01-30 17:10 724阅读 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 条评论，724人围观）

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

相关阅读

相关 css选择器_CSS选择器

css选择器 CSS选择器简介 (Introducing CSS Selectors) A CSS selector is the part of a CSS rule

客官°小女子只卖身不卖艺/ 2022年12月03日 11:26/ 0 赞/ 236 阅读

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

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

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

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

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

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

相关 CSS的选择器，优先级

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

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

相关 CSS3 选择器——基本选择器

[CSS的选择器][CSS]，我想大家并不会陌生吧，因为天天在使用，但对于[CSS3的选择器][CSS]，要运用的灵活到位，我想对很多朋友还是一定的难度，特别是CSS3中的:n

我就是我/ 2022年06月10日 05:24/ 0 赞/ 341 阅读

相关 css选择器优先级

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

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

相关 CSS选择器优先级比较

CSS选择器中比较常见的有标签选择器、ID选择器、类选择器以及子选择器。而事实上，CSS选择器如果细分下来，竟然多达40多种。那么当我们在碰到通过多种形式对同一个元素

爱被打了一巴掌/ 2022年05月09日 00:56/ 0 赞/ 199 阅读

相关 CSS选择器优先级详解

CSS选择器优先级详解选择器类型选择器优先级权重特殊情况动手试试选择器类型开发者在使用CSS进行网页开发时需要使用选择器来指定

约定不等于承诺〃/ 2022年03月30日 14:07/ 0 赞/ 314 阅读

相关 CSS选择器优先级

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

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

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

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

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