关于css优先级

内部样式表的优先级为1000,id选择器优先级为100,class选择器为10,标签为1。

例如:

情形一:div.test1 .span a 优先级 1+10 +10 +1

情形二:span#xxx .songs li 优先级1+100 + 10 + 1

情形三:#xxx li 优先级 100 +1

直接上代码:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div .aa{color:orange;}/*优先级11*/
		.bn .aa{color:red;}/*优先级20*/
		#bb .aa{color:yellow;}/*优先级110*/
		#bb a{color:blue;}/*优先级101*/
		.bn{color:green;}/*不起作用,设置字体的颜色需要精确到包裹字体的那个标签*/
	</style>
</head>
<body>
	<div id="bb" class="bn">
		<a style="color:gray;" href="#" class="aa">link</a>
		<!-- 内部样式表优先级最高为1000 -->
	<div>
</body>
</html>

代码执行后,link字体的颜色为gray,因为内部样式表的优先级最高。

时间: 2024-12-24 16:19:25

关于css优先级的相关文章

浅谈CSS优先级机制(一)

初次写随笔,如果有哪个地方不足还望大神指点改正,下面我来谈谈我对于CSS优先级的了解吧. CSS优先级,通俗的理解就是你给元素等一堆属性描述,然后最后到底是哪个描述作为最终显示的效果的规则或机制(个人理解).以下我将分为几个点来谈谈优先级的确定. 1.引入方式: CSS引入的方式,我目前只知道四种:内联式.内嵌式.导入式.链接式(当然网上的说法名称不一,理解就好). 各种引入方式的用法我在这里就不再多说了.以上我所按顺序罗列的四个方式是理论上的优先级顺序,也就是说,我使用内联式引入的css代码作

css 优先级 机制

多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式. 选择器的优先权--->权值 内联样式---1000: ID选择器----100:class选择器---10: 标签

css优先级

自适应布局 1.适应场景是:左右两列,一列设置浮动和设置宽度,另一列不需要设置浮动和宽度,只需设置overflow:hidden,就可以实现左右两列自适应.原理(BFC,清除浮动原理) 伪类与伪对象 在官方文档中伪类用classify来描述,而伪对象用create.从这里我们就能明白它们的区别: 伪对象则代表了某个元素的子对象,这个子对象虽然在逻辑上存在,但却并不实际存在于文档树中. 就像上文中的first-line,在DOM中其实并不存在.我们经常用的:before :after也属于伪对象.

css优先级汇总

我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴.优先级的顺序为内联样式>内部样式>外部样式. <head> <link href="style.css" rel="stylesheet" type="text/css" /> /*.color{color:red;}外部样式*/ &l

css优先级机制

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 1.important >(内联样式)Inline style  >(内部样式)Internal style sheet >(外部样式)External style sheet (有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式.) 2.CSS选择器优先级:id选择器优先级 > 类class选择器优先级 > 标签选择器优先级 1.文内的样式优先级为1,0,0,0,所以始终高于外部定义.

css优先级计算

主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系. 如果将这五种不同情况的优先级以数字的形式来表示的话,其对应关系如下: !important(10000) > 内联样式(1000) > id(100) > class(10) > tag(1) 则通常的css优先级比较可转化为数值大小的比较,如:#list li和.list .content ul l

html网页的兼容性和css优先级

网页不仅是在一个浏览器上显示的网页,也要多考虑其他浏览器的兼容性,火狐.谷歌.搜狗等浏览器总体来说,网页的变化不大,最主要的是还是IE浏览器. color:red\9; IE6  IE7   IE8  都会执行这段代码. color:red\0 ; IE8  都会执行这段代码. _color:red ; *color:red ; >color:red ; <color:red ;  IE6  IE7  都会执行这段代码. 在编写IE6  IE7   IE8显示不同颜色的时候,要主要编写的顺序,

CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别

在写一个TAB选项卡的时候遇到几个有意思的问题,记录下来 先把代码贴出来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="

CSS/优先级

css的优先级 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 样式表中的特殊性描述了不同规则的相对权重,它的基本规则是: 1 内联样式表的权值最高               style=""------------1000: 2 统计选择符中的ID属性个数.       #id --------------100 3 统计选择符中的CLASS属性个数. .class -------------10 4 统计选择符中的HTML标签名个数. p ------------

css优先级和层叠

css优先级和层叠 1.优先级    计算方法:        a.行内样式        b.id选择器的数量        c.类,伪类和属性选择器的数量        d.标签选择器和伪元素选择器的数量    假设a,b,c,d的权重分别为1000,100,10,1    那么有: 2.css层叠 了解了css的优先级,这时候我们就不得不提css中的层叠(此时考虑的还不涉及到z-index),我们应该知道如下几点:        1.当优先级相同,属性名相同时,后面的样式会覆盖前面的样式