WEB-DAY4学习笔记

CSS 各种选择器的概念，使用方法及使用场景

  CSS的选择器类别：简单选择器、属性选择器、派生选择器、伪类选择器。其中简单选择器包括（ID选择器、元素选择器、类选择器、通用选择器）。

  简单选择器和属性选择器见DAY3笔记。接下来讲讲选择器的一些基本概念。

• 选择器的分组：对同一些规则有多个选择器并且使用逗号隔开，表明这些选择器都使用这些规则
• 选择器的继承：子元素默认使用父元素的规则
• 派生选择器：一堆选择器之间用空格隔开，如A B C { }表明的是A中的B中的C
• 伪类选择器：伪类选择器用法为:pseudo-class-name，举例：article p:first-child {}表明的是article元素中的第一个p元素的使用的规则。其他还有:only-child、:invalid(常用于input元素)。链接a也有a:hover {}表示当鼠标悬停在链接上时的操作。注意和伪元素区：：分开，伪元素有article p::first-line {}。

   接下来讲组合器：

• 后代组合器：似乎跟派生选择器相同，都是以空格分隔。.box p {}
• 孩子组合器：A > B {}。只对A的直接孩子B有效。对于那些父元素不是A的B无效。
• 相邻同级组合器：A + B {}。A与B是同级的，且只对A右边的第一个B有效。
• 通用同级组合器：A ~ B {}。A和B是同级的，对所有跟在A后面的与A同级的B有效。

CSS优先级

  以下为CSS的一些基本规则：

• 最近的祖先样式比其他祖先样式优先级高。
• "直接样式"比"祖先样式"优先级高。
• ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 简单选择器 = 伪元素选择器
• !important毁天灭地拥有最高优先级，如例子  p {background: red !important;}

  而CSS本身有三种样式表：内联 > 页级 > 外联