一、标签的权重性

div a span                         1   （元素选择器）
.box .site-nav                 10    （类选择器）
#box #site                    100    （id选择器）
<div style= 'width'>     1000   （行内选择器）
!important 无穷大    （注：权重相同  后面为优先选中； 后代继承 权重为0）

 

二、  选择器的类型

1 元素选择器   p{ }   a{  }

2.属性选择器  a[href]；   img[alt="图片"]  ；   

3根据部分值选择 p[class~="important"]；     

4. 字符串属性选择器  [abc^="def"];  选择abc属性值器 以“def”开头的元素；

5. 字符串属性选择器  [abc$="def"];  选择abc属性值器 以“def”结尾的元素；

6. 字符串属性选择器  [abc*="def"];  选择abc属性值包含字符串“def”开头的元素；

7 特定属性类型     *[lang|="en"] {color: red;} 选择 lang 属性等于 en 或以 en- 开头的所有元素。

8 id选择器    #btn

9 后代选择器   #btn p 

10 后代选择器  #btn>p

11 相邻选择器  #btn+p

12 伪类选择器  selector：first-child()     (拓展a标签四中状态 位置不可变  ：link未访问  ：visited已访问  ：hover移动上去  ：active选中)

13.

:first-letter 向文本的第一个字母添加特殊样式。 1
:first-line 向文本的首行添加特殊样式。 1
:before 在元素之前添加内容。 2
:after 在元素之后添加内容。