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

叁歲伎倆 2022-11-11 05:28 207阅读 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 条评论，207人围观）

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

相关阅读

相关 CSS选择器及优先级

转自CSS优先级的计算公式：[http://wyz.67ge.com/css-selector-priority/][http_wyz.67ge.com_css-selecto

た入场券/ 2023年08月17日 17:20/ 0 赞/ 56 阅读

相关 css选择器_CSS选择器

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

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

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

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

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

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

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

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

相关 CSS的选择器，优先级

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

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

相关 css选择器优先级

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

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

相关 CSS选择器优先级比较

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

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

相关 CSS选择器优先级详解

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

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

相关 CSS选择器优先级

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

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

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

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

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