CSS选择器类型
样式类型
内联式样式：<div style="color:red;">
嵌入式样式：<style></style>
外联式样式：<link>或@import引入
选择器类型
id选择器、class选择器、属性选择器、*、伪类选择器、伪元素、后代选择器、子类选择器、兄弟选择器
权重计算规则
- 第一优先级：
!important会覆盖页面内任何位置的元素样式 - 1.内联样式，如
style="color: green"，权值为1000 - 2.ID选择器，如
#app，权值为0100 - 3.类、伪类、属性选择器，如
.foo, :first-child, div[class="foo"]，权值为0010 - 4.标签、伪元素选择器，如
div::first-line，权值为0001 - 5.通配符、子类选择器、兄弟选择器，如
*, >, +，权值为0000 - 6.继承的样式没有权值
优先级注意点:
-
权重是有4组数字组成,但是不会有进位。
-
可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..
-
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
-
可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为1000, !important 无穷大.
-
继承的权重是0， 如果该元素没有直接选中， 不管父元素权重多高，子元素得到的权重都是 0.通配符、子选择器、兄弟选择器，虽然权重为
0000，但是优先于继承的样式 -
权重相同的情况下，位于后面的样式会覆盖前面的样式
权重叠加：
如果是复合选择器，则会有权重叠加，需要计算权重。
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
CSS中可继承与不可继承属性有哪些
一、无继承性的属性
- display：规定元素应该生成的框的类型
- 文本属性：
- vertical-align：垂直文本对齐
- text-decoration：规定添加到文本的装饰
- text-shadow：文本阴影效果
- white-space：空白符的处理
- unicode-bidi：设置文本的方向
- 盒子模型的属性：width、height、margin、border、padding
- 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
- 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
- 生成内容属性：content、counter-reset、counter-increment
- 轮廓样式属性：outline-style、outline-width、outline-color、outline
- 页面样式属性：size、page-break-before、page-break-after
- 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二、有继承性的属性
- 字体系列属性
- font-family：字体系列
- font-weight：字体的粗细
- font-size：字体的大小
- font-style：字体的风格
- 文本系列属性
- text-indent：文本缩进
- text-align：文本水平对齐
- line-height：行高
- word-spacing：单词之间的间距
- letter-spacing：中文或者字母之间的间距
- text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
- color：文本颜色
- 元素可见性
- visibility：控制元素显示隐藏
- 列表布局属性
- list-style：列表风格，包括list-style-type、list-style-image等
- 光标属性
- cursor：光标显示为何种形态
