CSS教程】【Web前端基础】css选择器优先级顺序

2020-11-18 14:19发布

10条回答
freediandianer
1楼 · 2020-11-18 18:21.采纳回答

1.   !important

    在属性后面写上这条样式,会覆盖掉页面上任何位置定义的元素的样式。

  2.   行内样式,在style属性里面写的样式。

  3.  id选择器

  4. class选择器

  5. 标签选择器

     6. 通配符选择器*

  7. 浏览器的自定义属性和继承


我是大脸猫
2楼 · 2020-11-18 14:59

1、类型选择器

CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器),可以向这种元素类型的每个实例上应用声明。例如,以下简单规则的选择器是H1,因此规则作用于文档中所有的H1元素。

2、简单属性选择器

CLASS属性

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲,可以使用CLASS属性来分类元素,在样式表中创建规则来引用CLASS属性的值,然后浏览器自动将这些属性应用到该组元素。

类选择器以标志符(句点)开头,用于指示后面是哪种类型的选择器。对于类选择器,之所以选择句点是因为在很多编程语言中它与术语"类"相关联。翻译成英语,标志符表示"带有类名的元素"。

ID属性

ID属性的操作类似于CLASS属性,但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。

需要注意的是,ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。

STYLE属性

尽管在选择器中可以使用CLASS和ID属性值,STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值),STYLE属性的值实际上是一个或多个CSS声明。

通常情况下,使用CSS,设计者将把所有的样式规则置于一个样式表中,该样式表位于文档顶部的STYLE元素内(或在外部进行链接)。但是,使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。

3、组合选择器类型

可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器,可以更加精确地处理希望赋予某种表示的元素。例如,要组合类型选择器和类选择器,一个元素必须满足两个要求:它必须是正确的类型和正确的类以便使样式规则可以作用于它。

外部信息:伪类和伪元素

在CSS1中,样式通常是基于在HTML源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行,但是它无法实现设计者希望获得的一些常见的设计效果。

设计伪类和伪元素可以实现其中的一些效果。这两种机制扩充了CSS的表现能力。在CSS1中,使用伪类可以根据一些情况改变文档中链接的样式,如根据链接是否被访问,何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素,可以更改元素的第一个字母和第一行的样式,或者添加源文档中没有出现过的元素。

伪类和伪元素都不存在于HTML;也就是说,它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充;也就是说实现更多的效果。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

CSS选择器如下:
  1. 标签名选择器 div { color:Red;} /即页面中的各个标签名的css样式
  2.类选择器 .divClass {color:Red;} /即定义的每个标签的class 中的css样式
  3.ID选择器 #myDiv {color:Red;} /即页面中的标签的id
  4.后代选择器(类选择器的后代选择器) .divClass span { color:Red;} /即多个选择器以逗号的格式分隔 命名找到准确的标签
  5.群组选择器 div,span,img {color:Red} /即具有相同样式的标签分组显示
  选择器的优先级
  1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)


  2.次优先级是(ID选择器 ,假设级别为100) #myDiv{color:Red;}
  3.其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}
  4.最后优先级是 (标签选择器,假设级别是 1) div{color:Red;}
  5.那么后代选择器的优先级就可以计算了啊
  比如 .divClass span { color:Red;} 优先级别就是:10+1=11


1234
3楼 · 2020-11-18 16:17

特殊性规则总结起来有以下六点:

  • 重要性声明!important特殊性优先于所有其他特殊性。

  • 对于元素中给定的内联样式,特殊性加 1,0,0,0。

(栗子:style="")

  • 对于选择器中给定的ID属性值,特殊性加 0,1,0,0。

(栗子:#eleId{})

  • 对于选择器中给定的类属性值、属性选择或伪类,特殊性加 0,0,1,0。

(栗子:.css,*[name="n"],*:hover{})

  • 对于选择器中给定的元素或伪元素,特殊性加 0,0,0,1。

(栗子:div,*:before{})

  • 结合符和通配选择器,特殊性加 0,0,0,0。

(栗子:*{}, ' ', '+', '>', '~')

优先顺序比较起来,特殊性'0,0,1,0' 优先于特殊性'0,0,0,99',其他情况以此类推。特殊情况,'0,0,0,0'优先于无特殊性(比如继承)样式。


风火轮
4楼 · 2020-11-18 17:37

1、类型选择器

CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器),可以向这种元素类型的每个实例上应用声明。例如,以下简单规则的选择器是H1,因此规则作用于文档中所有的H1元素。

2、简单属性选择器

CLASS属性

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲,可以使用CLASS属性来分类元素,在样式表中创建规则来引用CLASS属性的值,然后浏览器自动将这些属性应用到该组元素。

类选择器以标志符(句点)开头,用于指示后面是哪种类型的选择器。对于类选择器,之所以选择句点是因为在很多编程语言中它与术语"类"相关联。翻译成英语,标志符表示"带有类名的元素"。

ID属性

ID属性的操作类似于CLASS属性,但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。

需要注意的是,ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。

STYLE属性

尽管在选择器中可以使用CLASS和ID属性值,STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值),STYLE属性的值实际上是一个或多个CSS声明。

通常情况下,使用CSS,设计者将把所有的样式规则置于一个样式表中,该样式表位于文档顶部的STYLE元素内(或在外部进行链接)。但是,使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。

3、组合选择器类型

可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器,可以更加精确地处理希望赋予某种表示的元素。例如,要组合类型选择器和类选择器,一个元素必须满足两个要求:它必须是正确的类型和正确的类以便使样式规则可以作用于它。

外部信息:伪类和伪元素

在CSS1中,样式通常是基于在HTML源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行,但是它无法实现设计者希望获得的一些常见的设计效果。

设计伪类和伪元素可以实现其中的一些效果。这两种机制扩充了CSS的表现能力。在CSS1中,使用伪类可以根据一些情况改变文档中链接的样式,如根据链接是否被访问,何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素,可以更改元素的第一个字母和第一行的样式,或者添加源文档中没有出现过的元素。

伪类和伪元素都不存在于HTML;也就是说,它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充;也就是说实现更多的效果。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

CSS选择器如下:
  1. 标签名选择器 div { color:Red;} /即页面中的各个标签名的css样式
  2.类选择器 .divClass {color:Red;} /即定义的每个标签的class 中的css样式
  3.ID选择器 #myDiv {color:Red;} /即页面中的标签的id
  4.后代选择器(类选择器的后代选择器) .divClass span { color:Red;} /即多个选择器以逗号的格式分隔 命名找到准确的标签
  5.群组选择器 div,span,img {color:Red} /即具有相同样式的标签分组显示
  选择器的优先级
  1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)


  2.次优先级是(ID选择器 ,假设级别为100) #myDiv{color:Red;}
  3.其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}
  4.最后优先级是 (标签选择器,假设级别是 1) div{color:Red;}
  5.那么后代选择器的优先级就可以计算了啊
  比如 .divClass span { color:Red;} 优先级别就是:10+1=11


小猴子
5楼 · 2020-11-24 08:16

1.   !important

    在属性后面写上这条样式,会覆盖掉页面上任何位置定义的元素的样式。

  2.   行内样式,在style属性里面写的样式。

  3.  id选择器

  4. class选择器

  5. 标签选择器

     6. 通配符选择器*

  7. 浏览器的自定义属性和继承


灰机带翅膀
6楼 · 2020-12-05 20:13

1.CSS优先级顺序
优先级从上往下以及权重
行内样式 > 1000
id选择器 > 100
类选择器= 属性选择器 = 伪类选择器 > 10
标签选择器 = 伪元素选择器> 1
通配符>0

2.CSS 优先级规则:
a.选择器都有一个权值,权值越大越优先。
b.当权值相等时,后出现的样式表设置要优于先出现的样式表设置。
c.创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。
d.继承的CSS 样式不如后来指定的CSS 样式。
e.在同一组属性设置中标有“!important”规则的优先级最大。


猫的想法不敢猜
7楼 · 2021-01-24 11:35
  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

  2. 作为style属性写在元素内的样式

  3. id选择器

  4. 类选择器

  5. 元素选择器

  6. 通配符选择器

  7. 浏览器自定义或继承

总结排序:!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性


相关问题推荐

  • 回答 11

    一、position 的四个值:static、relative、absolute、fixed。绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative默认值:static二、relative定位与absolute定位的区别实例:HTML代码:css代码:初始效果:1、relative:相对于原来位置移动,元素...

  • 回答 14

    1.static:正常文档定位,此时top,bottom,left和z-index属性无效,块级元素从上往下纵向排布,行级元素从左往右排列2.relative: 相对定位,此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移,来确定元素位置,比如一个绝...

  • 回答 8

    设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素相对于它的起点进...

  • 回答 15

    浮动和定位都可以使元素脱离标准文档流,提升层级,  浮动脱离文档流,提高半个层级,不能完全覆盖下面元素(不能覆盖图片文字)定位脱离标准文档流,提升一个层级,可以完全覆盖下面元素及其内容...

  • 回答 7

    绝对定位就是你的位置已经不属于你了,你只能漂浮在半空中。相对定位就是你的位置你还占用的,人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的,都找不到的话就以body窗口来定位。...

  • 回答 17

    定位:1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容

  • 回答 5

    css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...

  • 回答 7

    引言:这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱。你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用。一、何为BFC       BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的...

  • 回答 8

    同时用JS就可以随意移动DIV标签的位置 {maxz_play} [removed]var obj=document.getElementById('idDiv');obj.style.left='10px';obj.style.top='10px';[removed]

  • 回答 9

    css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起,举个例子来说吧,就比如有两个div盒子在网页中显示,一个盒子里展示的是图片,另一个盒子中展示的是文字,他们虽说自己占有的位置不大,可是他们却各占一行来显示,这可...

  • 回答 12

    BFC 是 Block Formatting Context(块级格式化上下文)的缩写,它是为了解决如下问题:浮动定位外边距合并清除浮动自适应多栏布局

  • 回答 9

    一、何为BFC       BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件      1、浮动元素,float 除 none 以外的值;       2、定位元素,p...

  • 回答 12

    css清除浮动可以理解为打破横向排列。 清除浮动的关键字是clear,官方定义如下: 语法: clear : none | left | right | both 取值: none : 默认值。

  • 回答 11

    float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。CSS世界中的float属性是一个年代非常久远的属性,设置了float属性的元素会根据设置的属性值向左或者向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边...

  • 回答 11

    如果不定义浮动的话,各个div的内容在页面上是由上向下排列的。而如果某个div定义了float: left,那么这个div就会出现在上层div下最靠左的位置,而与它同一等级,但列在它后面的div就会显示在他的右侧了。同样,如果定义了float:right,那么这个div就会出现在...

  • 回答 6

    1、 元素类型的转换(display属性)Display属性属性值:BlockInlineNone大部分块状元素默认的display的值为block,其中li默认的值 list-item(列表元素)大部分内联元素默认的display值为inline,其中input默认的值为:inline-block;(行内块元素);内联元素...

没有解决我的问题,去提问