HTML + CSS 重难点记录篇

【前言】总结助理解，实践出真知。

【1】子选择器 与 后代（包含）选择器：

①子选择器：

关键符：大于符号(>)

作用对象：指定标签元素的第一代子元素

如：css中: #rebook>li{}

html中:<ul id="rebook">

<li></li>

     </ul>

②后代（包含）选择器：

关键符：空格

作用对象：指定标签元素下的后辈元素

如：css中: #rebook  li{}
html中:<ul id="rebook">

<li></li>

     </ul>

区别：>作用于元素的第一代后代，空格作用于元素的所有后代。

【2】CSS伪类：

a:link{}，定义正常链接的样式；

a:visited{}，定义已访问过链接的样式；

a:hover{}，定义鼠标悬浮在链接上时的样式；

a:active{}，定义鼠标点击链接时的样式。 

【3】CSS中不可继承的属性：

display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi...

【4】CSS样式权值规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

            !important加在“{;}”（分号之前）可以使该样式权值最大