网页二三事

块元素：（独占一行）

div	p	h1~h6	li

div没有任何语意

内联元素：（只占本身大小）

span	a	img	iframe

span同div 一样没有任何语意

• a元素可以包含除它本身外的任何标签
• p元素可以包含除块元素外的任何元素

元素之间的关系：

父元素	子元素	祖先元素	后代元素	兄弟元素

• 后代元素选择器语法：祖先元素 后代元素{ }
  如给祖先元素命名id的话则是：#祖先元素id名 后代元素{ }
• 子元素选择器语法：父元素 > 子元素{ }

样式的继承：

子元素会继承父元素中的字号大小，背景、表框、定位不被继承

属性选择器：

选择器	语意
我是一个p段落	（给文字设置提示语）
p[title]{color:red;}	（给具有title属性的p标签添加红色）
p[title="哈哈"]{color:red;}	（给具有title属性为哈哈的p标签添加红色）
p[title^="ab"]{color:red;}	（给title属性开头为ab的p标签添加红色）
p[title$="c"]{color:red;}	（给title属性结尾为c的p标签添加红色）
p[title*="c"]{color:red;}	（给title属性包含c的p标签添加红色）

兄弟元素选择器:

选择器	语意
span + p	span的后一个p标签。必须在span后边且是p元素
span ~ p	span后所有p标签。只要是span后的p元素都会满足

选择器的优先级：

选择器	优先等级
内联样式	1000
id选择器	100
类和伪类	10
元素选择器	1
通配*	0
继承的样式	没有优先级

注

• 选择器内包含选择器时，优先等级相加
• 优先级一样时，后面的会把前面的覆盖
• 在样式后加 !inportant 会采用最高优先等级（比内联样式还高），故不推荐采取这种方法