css选择器和相应权重

412 阅读2分钟

1,标签选择器

以标签名开头,选择所有div元素

2,类选择器

给标签取class名,以点(.)加class名开头,选择所有该class名的元素

3,id选择器

给标签取id名,以#加id名开头,具有唯一性,选择”id = ‘wrap’”的元素

4,子选择器

以>隔开父子级元素,(模块名>模块名,修饰>前模块内的子模块)    div>p

5,包含选择器

以空格隔开包含关系的元素,(模块名模块名,修饰空格前模块内所有该模块)  div p

6,兄弟选择器

隔开兄弟关系的元素(模块名模块名 修饰~前模块往下的所有兄弟模块)

7,相邻选择器

以+隔开相邻关系的元素(模块名+模块名 修饰加号前模块往下的相邻的模块 只一个)

8,全局选择器

以*开头(星号标在大括号前,修饰了包含body所有的标签)

9,群选择器

以,分隔(逗号分隔开需要修饰的模块名)

10,属性选择器

[] ([type=text]修饰属性为type=text的模块)

11,伪类选择器

 (1) li:first-child{} (修饰第一个li)

(2) li:last-child{} (修饰最后一个li)

(3) li:nth-child{} (修饰第()个li)

(4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)

除此之外 伪类选择器还有很多 像是上面这种 都属于结构伪类选择器,伪类选择器 还有,**动态伪类选择器,****目标伪类选择器,****语言伪类选择器,****元素状态伪类选择器,****结构伪类选择器,**否定伪类选择器。

参看www.html.cn/qa/css3/137…

CSS选择器的种类:

 1.id选择器如:(id=”name”,id=”name_txt)(*name) 

2.class选择器(如:class=”head”,class=”head_logo”)(#head)

 3.标签选择器(如:body,div,p,h1,form) 

4.全局选择器(如:*号) 

5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开) 

6.继承选择器(如:div p,注意两选择器用空格键分开) 

7.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

CSS的优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

CSS选择器的权重分析:

 第一等:代表 内联样式,如: style=””,权值为:1000。 

第二等:代表 ID选择器,如:#content,权值为:0100。 

第三等:代表 类,伪类和属性选择器,如: .content , :hover , [type="text"] 权值为:0010。 第四等:代表 标签选择器和伪元素选择器,如: p ,::first-line 权值为:0001。 

通配符、子选择器、相邻选择器等的。如: *、>、+,权值为:0000。 

继承的样式没有权值,通配选择器定义的规则优先级高于元素继承过来的规则的优先级。