块元素:(独占一行)
div没有任何语意
内联元素:(只占本身大小)
span同div 一样没有任何语意
- a元素可以包含除它本身外的任何标签
- p元素可以包含除块元素外的任何元素
元素之间的关系:
- 后代元素选择器语法:祖先元素 后代元素{ }
如给祖先元素命名id的话则是:#祖先元素id名 后代元素{ }
- 子元素选择器语法:父元素 > 子元素{ }
样式的继承:
子元素会继承父元素中的字号大小,背景、表框、定位不被继承
属性选择器:
选择器 |
语意 |
<p title="哈哈">我是一个p段落</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 会采用最高优先等级(比内联样式还高),故不推荐采取这种方法