CSS day01

知道自己有多差劲了吗，赶紧努力吧。

起始进度：

百度前端 Mozilla

1.层叠和继承

对于层叠来说，共有三种主要的样式来源：

• 浏览器对HTML定义的默认样式。
• 用户定义的样式。
• 开发者定义的样式，可以有三种形式：
  • 定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式。
  • 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。
  • 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。

优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。

另外，CSS提供了一个 !important 关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。这就意味着，作为开发者，你很难准确的预知页面最终在用户电脑上的显示效果。

2.选择器

示例代码

<p id="principal" class="key">

• Type selector

p {color: blue;}

• ID selector (唯一，区分大小写)

#principal {color: blue;}

• Class selector

.key {color: blue;}

伪类选择器（Pseudo-classes selectors）

CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover会在鼠标悬停在选中元素上时应用相应的样式。

伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 (:visited)， 内容状态(如:checked), 鼠标位置 (如:hover).

伪类列表

• :link
• :visited
• :active
• :hover
• :focus
• :first-child
• :nth-child
• :nth-last-child
• :nth-of-type
• :first-of-type
• :last-of-type
• :empty
• :target
• :checked
• :enabled
• :disabled

常见的基于关系的选择器

选择器	选择的元素
A E	元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推，即A的子子孙孙)
A > E	元素A的任一子元素E(也就是直系后代)
E:first-child	任一是其父母结点的第一个子节点的元素E
B + E	元素B的任一下一个兄弟元素E
B ~ E	B元素后面的拥有共同父元素的兄弟元素E