CSS伪类、伪元素、继承、层叠

伪类

• :first-child
• :last-child
• :nth-child(n)

1.:first-child 和 :last-child

分别代表一组同胞中的第一和最后一个元素

2.:nth-child(n)

n为从 0 开始递增的自然数，也可用 odd （奇数） even （偶数）代替
或者写成函数式 2n+1 ，3n+1等

伪元素

• first-letter
• ::first-line
• ::before&::after

1.::first-letter

行首第一个字符

2.::first-line

第一行

3.::before&::after

可在特定元素前面或后面添加内容

e::after{
content:".";
display:block;
height:0;
visibility:hidden;
clear: both;
}
//清除浮动

继承

每个 CSS 属性定义指定属性
默认继承 ("Inherited: Yes") 默认不继承 ("Inherited: no")
当元素的一个**可继承属性 **没有指定值时，则取父元素的同属性的 计算值 computed value
当元素的一个 非继承属性 没有指定值时，则取属性的 初始值initial value

层叠

• 层叠规则：

  1. 浏览器会读取所有样式声明
  2. 按特指度（specificity）排序

  内联 > ID > 类 普通选择器 > 标签 伪元素选择器 > 继承的样式
  以10倍差计算
  内联是特例

  3. 特指度相等，按照样式顺序位置排序（就近原则）

  1. 浏览器默认样式

  2. 外部样式
  3. 内部样式
  4. 内联样式

• 提权（从上到下的顺序）

1. 改变先后顺序:近水楼台先得月
2. 提高选择器有限级(多个选择器一起定位标签,权重计算是总的和值)
   3.在属性后加 !important(一般不建议使用 除非前两步提权失效)