探讨浏览器CSS选择器的权重!!!

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>js控制CSS案例</title><!--2.设计样式--><style>#loginSec{width:300px;height: 150px; background-color: #eee;padding: 20px;}input#username,input#pwd{outline: none;border-radius: 10px;/*圆角*/border:1px solid #666;}/*获得焦点的样式*/.fStyle{background-color: #ff9;border: 1px solid #f00;}.bStyle{background-color: #fff;border: 1px solid #666;}</style><!--3.写js来控制CSS--><script>//第二部代码升级//提取公共代码，得到一个函数;-->一门技术jquery//函数名：叫$function $(obj){return document.getElementById(obj);}//获得焦点事件function focusStyle(obj){$(obj).className="fStyle";/* $(obj).style.backgroundColor="#ff9";$(obj).style.borderColor="#f00";*/}//失去焦点事件function blurStyle(obj){$(obj).className="bStyle";/*$(obj).style.backgroundColor="#fff";$(obj).style.borderColor="#666";*/}</script>
</head>
<body><!--1.页内布局--><section id="loginSec">             <!--username它是实际参数-->用户:<input type="text" id="username" οnfοcus="focusStyle('username')" οnblur="blurStyle('username')"/><br/><br/>密码:<input type="password" id="pwd" οnfοcus="focusStyle('pwd')" οnblur="blurStyle('pwd')"/><br/><br/><button id="btnLogin">登陆</button><button id="btnEsc">取消</button></section>
</body>
</html>

出现的问题是边框设置无效，焦点获得和消失，后来问了下，发现是焦点权重问题，把权重问题给他家分享下。

改成input直接设置，就好了。分享CSS权重几倍知识点如下：

CSS有自己的优先级计算公式，而不仅仅是行间>内部>外部样式；ID>class>元素。

一、样式类型

　　1、行间

<h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1>

　　2、内联

<style type="text/css">h1{font-size:12px;color:#000;}
</style>

　　3、外部

<link rel="stylesheet" href="css/style.css">

二、选择器类型

　　1、ID　　#id

　　2、class　　.class

　　3、标签　　p

　　4、通用　　*

　　5、属性　　[type="text"]

　　6、伪类　　：hover

　　7、伪元素　　::first-line

　　8、子选择器、相邻选择器

三、权重计算规则

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。

四、比较规则

1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。
无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。
在权重相同的情况下，后面的样式会覆盖掉前面的样式。
通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。

五、！important

!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。
```
<style>p{color:red !important;}
</style>
<p style="color:blue;">我显示红色</p>　　  
```
ie7+和别的浏览器对important的这种作用的支持度都很好。只有ie6有些bug
```
p{color:red !important;color:blue;
}//会显示blue
```
但是这并不说明ie6不支持important，只是支持上有些bug。看下面
```
p{color:red !important;
}
p{color:blue;
}
//这样就会显示的是red。说明ie6还是支持important的。
```

六、实例

 a{color: yellow;} /*特殊性值：0,0,0,1*/div a{color: green;} /*特殊性值：0,0,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/#demo a{color: orange;} /*特殊性值：0,1,0,1*/div#demo a{color: red;} /*特殊性值：0,1,0,2*/<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div class="demo"><input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则，第4行优先级高--><a href="">第三条应该是黑色</a><!--适用第2、3行规则，第3行优先级高-->
</div>
<div id="demo"><a href="">第四条应该是红色</a><!--适用第5、6行规则，第6行优先级高-->
</div>

探讨浏览器CSS选择器的权重!!!相关推荐

关于CSS选择器的权重计算
CSS选择器的权重计算公式大概如下: 内联样式表的权值最高为 1000: ID 选择器的权值为 100 Class 类选择器.属性选择器.伪类的权值为 10 HTML 元素选择器.伪元素的权值为 1 ...
CSS选择器的权重详解
在我们开始之前,先搞明白几个概念吧.下面是一段CSS代码: a { border-bottom: 0px; color: #5DB0E6; } a:focus { outline: 1px ...
css选择器及其权重
1. 类型选择器 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
【CSS】CSS选择器及其权重
基本选择器 id 选择器 - - - #id {} - - - 唯一标识,只能有一个.尽量少用 id 选择器,影响权重类名选择器 - - - .class {} - - - class 类名,可以有 ...
CSS选择器的权重与优先规则
2019独角兽企业重金招聘Python工程师标准>>> 我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样 ...
css选择器优先级权重计算规则
作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高权重大小: 1.内联样式,如: style="...",权值为1000. 2.ID选择器,如:#c ...
CSS选择器的权重与优先规
我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值. 4个等级的定义如下: 第一等:代表内联样式,如: ...
css选择器的优先级和权重问题
CSS选择器的种类: 1.id选择器如:(id="name",id="name_txt)(*name) 2.class选择器(如:class="head&quo ...
房子装修工程师CSS(一)之盒子模型/选择器的权重计算/常见样式属性/浮动float
一.盒子模型 (一)CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:margin.border.padding.content(width.height). (二)盒子模型分两种: 1. ...

探讨浏览器CSS选择器的权重!!!

探讨浏览器CSS选择器的权重!!!相关推荐

最新文章

热门文章