css选择器 权重

css选择器 权重

---

---

前言

写css有三种方式 ：内嵌 内联 外联

内嵌：在head中创建<style 标签 在里面写css样式
内联：在标签里写style=‘color：red’
外联：单独创建css文件 将其引入到html中
三种方式在实际使用中，权重优先级从高到低：嵌入>内联>外联。比较通用的样式适合抽离出来用外联，提高复用性，同时降低样式和内容的耦合；元素独立的不太多的样式可以用嵌入式方便些。

---

一、选择器

1.基础选择器

1.通用元素选择器 : 所有的标签都变色*{color:red}

2.标签选择器：匹配所有使用p标签的样式 p{color:red}

3.id选择器：匹配指定的id标签 #p2{color:red}

4.class类选择器：匹配指定的class标签 .c1{color:red} 或者 div.c1{color:red}

2.组合选择器

1.后代选择器 (不分层级，只让p标签变色) .c2 p{color:red}
2.子代选择器（只在儿子层找） .c2>p{color:red}
3.多元素选择器：同时匹配所有指定的元素 .div,p{color:red}
3.毗邻选择器（紧挨着，找相邻的,只找下面的，不找上面的）.c2+p{color:red}
4.兄弟选择器：同一级别的，离得很近的.c2~p{color:red}

3.属性选择器

E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。 比如“[cheacked]”。以下同。） p[title] {}

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] {}

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] {}

E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^=“test”]{}

E[attr$=val]匹配属性值以指定值结尾的每个元素div[class$=“test”]{b}

E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*=“test”]{}

4.伪类选择器

:hover a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
:before p:before 在每个p元素之前插入内容
:after p:after 在每个p元素之后插入内容
…

二、权重

1.权重

1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；

2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100

3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10

4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1

2.计算

根据选择器把权重加起来 同一元素只展现权重最大的属性

---

总结

谢谢观看-v-