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

叁歲伎倆 2022-11-11 05:28 226阅读 0赞

CSS选择器是编写CSS代码时的一个核心概念，我们在设计网页页面时，使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。而HTML页面中的元素就是通过CSS选择器进行控制的，以下是自己在学习及工作过程中对CSS选择器的一些总结，希望能帮助到有需要的新手同学，同时也帮助自己巩固基础，加深记忆。

css样式是由两部分组成，形式如下：

\[code\] 选择器\{样式\} \[/code\] 在\{\}之前的部分就是“选择器”。

“选择器”指明了\{\}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

那么大家可以简单了解下css选择器有哪些分类？

##### 一、标签选择器 #####

body,div,p,ul,li...

##### 二、类选择器 #####

class="demo"
    class="demo_1"

##### 三、ID选择器 #####

id="name",id="name_t"

##### 四、全局选择器 #####

*

##### 五、组合选择器 #####

.demo .demo_1
    /*两选择器用空格键分开*/

##### 六、后代选择器 #####

#head .nav ul li
     /* 从父集到子孙集的选择器 */

##### 七、群组选择器 #####

div,span,img {color:blue}
    /*即具有相同样式的标签分组显示*/

##### 八、继承选择器 #####

div p
    /*两选择器用空格键分开*/

##### 九、伪类选择器 #####

link、visited、active、hover...
    /* 链接样式,a元素的伪类，4种不同的状态*/

##### 十、字符串匹配的属性选择符 #####

^ $ *
    /*分别对应开始、结尾、包含*/

##### 十一、子选择器 #####

div>p
    /* 带大于号>*/

##### 十二、CSS 相邻兄弟选择器 #####

h1+p
    /*  带加号+ */

了解完css分类，大家也需要简单了解下**什么是层叠性？**

**层叠性**：就是css处理冲突的能力。层叠性是一种能力。当多个选择器描述了同一个属性的时候，这个属性到底应该听谁的？

那么下面我们给大家总结了**css选择器的优先级顺序！**

**css优先级高低排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性**

--------------------

[【了解更多前端相关知识，戳】][Link 1]

[Link 1]: https://jq.qq.com/?_wv=1027&k=Sxfe4XD2

发表评论取消回复

表情：

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

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

相关阅读

相关什么是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 赞/ 68 阅读

相关 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 赞/ 29 阅读

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

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

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

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

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

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

相关 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 赞/ 348 阅读

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

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

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