Css元素和权重知识点总结

1.伪元素：用于设置元素指定部分的样式。

2.在设置元素样式时，可以在元素之前或之后插入样式。

例如：元素的首字母或首行的样式设置。

3.在需要清除浮动效果的父元素上，可以通过::after的伪元素来设置清除浮动。需要注意的是伪元素默认行内元素，需要设置为块级元素才能达到效果。

4.常见的伪元素如下图：

 

5.常用伪元素：

::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

6.css伪类：添加到选择器的关键字，指定要选择的元素的特殊状态。

例如，:hover可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

7.css伪类的简单分类：

8. CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。 

9.权重等级的计算:

 

 

可以把样式的应用方式分为几个等级，按照等级来计算权重

!important，加在样式属性值后，权重值为 10000。

内联样式，如：style=””，权重值为1000。

ID选择器，如：#content，权重值为100。

类，伪类和属性选择器，如： content、:hover 权重值为10。

标签选择器和伪元素选择器，如：div、p、:before 权重值为1。

通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0。

10.权重的小例子：

（1）页面效果图如下：

    

 

（2）页面代码：

     先进行简单的页面布局，再设置样式和属性。

     第一个的属性设置：div和.main没有空格表示同级，权重计算为 100+1+10+1=112 所以字体颜色应用这里的属性值。

     第二个的属性设置：这里权重计算为 100+10+1=111，背景颜色为绿色。