网页二三事
作者:
Lrrrrtt | 来源:发表于
2018-06-03 19:57 被阅读0次块元素：（独占一行）
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 会采用最高优先等级（比内联样式还高），故不推荐采取这种方法
本文标题：网页二三事
本文链接：https://www.haomeiwen.com/subject/ghpksftx.html
网友评论