CSS2基础笔记（3）---- CSS选择器的优先级、CSS三大特性、CSS常用属性之像素、颜色的四种表示方式

一、CSS选择器

1.CSS基本选择器（参考CSS2基础笔记（1））

2.CSS组合选择器（ 参考CSS2基础笔记（2）---- CSS选择器）

3.选择器的优先级（权重）

作用：通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。

1. 简单描述：

   行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

2. 详细描述：
   1.计算方式：每个选择器，都可计算出一组权重，格式为：(a,b,c)

   • a : ID 选择器的个数。
   • b : 类、伪类、属性 选择器的个数。
   • c : 元素、伪元素 选择器的个数。

   选择器	权重
   ul>li	(0,0,2)
   div ul>li p a span	(0,0,6)
   #encounter .slogan	(1,1,0)
   #encounter .slogan a	(1,1,1)
   #encounter .slogan a:hover	(1,2,1)

   2.比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比。

   • (1,0,0) > (0,2,2)
   • (1,1,0) > (1,0,3)
   • (1,1,3) > (1,1,2)

   3.特殊原则

   1. 行内样式权重大于所有选择器
   2. !important 的权重，大于行内样式，大于所有选择器，权重最高！

二、CSS三大特性

1.层叠性

• 概念：如果发生了样式冲突，那就会根据一定的规则(选择器优先级)，进行样式的层叠(覆盖)。

  样式冲突：元素的同一个样式名，被设置了不同的值，这就是冲突。

2.继承性

• 概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
• 规则：优先继承离得近的。

3.优先级

• 简单聊： !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > *（通配选择器） > 继承的样式。

• 详细聊：需要计算权重。

  计算权重时需要注意：并集选择器的每一个部分是分开算的！

三、CSS常用属性

1.像素

• 概念：电脑屏幕是由一个一个“小点”组成的，每个“小点”，就是一个像素（px）。
• 规律：像素点越小，呈现的内容就越清晰、越细腻。
• 注意：如果电脑默认设置开启了缩放，那就会影响一些工具的测量结果，但这些无所谓，因为工作当中都是有参考详细的设计稿，去给元素设置宽高。

2.颜色的表示方式

2.1表示方式1：颜色名

• 编写方式：直接使用颜色对应的英文单词，编写比较简单，例如：

  • 红色：red
  • 绿色：green
  • 蓝色：blue
  • 紫色：purple
  • 橙色：orange
  • 灰色：gray

2.2表示方式2：rgb或rgba

• 编写方式：使用 红、黄、蓝 这三种光的三原色进行组合。

  • r 表示红色
  • g 表示绿色
  • b 表示蓝色
  • a 表示透明度

• 举例：

  
     /* 使用 0~255 之间的数字表示一种颜色 */
     color: rgb(255, 0, 0);/* 红色 */
     color: rgb(0, 255, 0);/* 绿色 */
     color: rgb(0, 0, 255);/* 蓝色 */
     color: rgb(0, 0, 0);/* 黑色 */
     color: rgb(255, 255, 255);/* 白色 */
  
  	/* 混合出任意一种颜色 */
  	color:rgb(138, 43, 226) /* 紫罗兰色 */
  	color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */
  	
  	/* 也可以使用百分比表示一种颜色（用的少） */
  	color: rgb(100%, 0%, 0%);/* 红色 */
  	color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */
  

2.3表示方式3：HEX或HEXA

• 编写方式：HEX 的原理同与rgb一样，依然是通过：红、绿、蓝色 进行组合，只不过要用6位(分成3组)来表达。

• 格式：#rrggbb

  • 每一位数字的取值范围是：0 ~ f，即：(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f）
  • 所以每一种光的最小值是：00，最大值是：ff

• 举例：

  	color: #ff0000;/* 红色 */
  	color: #00ff00;/* 绿色 */
  	color: #0000ff;/* 蓝色 */
  	color: #000000;/* 黑色 */
  	color: #ffffff;/* 白色 */
  	/* 如果每种颜色的两位都是相同的，就可以简写*/
  	color: #ffeecc;/* 可简为：#fec */
  	/* 但要注意前三位简写了，那么透明度就也要简写 */
  	color: #ff998866;/* 可简为：#f986 */
  

• 注意：IE浏览器不支持 HEXA ，但支持 HEX 。

2.4表示方式4：HSL或HSLA

• 编写方式：HSL是通过：色相、饱和度、亮度，来表示一个颜色的，格式为：hsl(色相,饱和度,亮度)。

  • 色相：取值范围是 0~360 度。
  • 饱和度：取值范围是0%~100%。(向色相中对应颜色中添加灰色，0%全灰，100%没有灰)。
  • 亮度：取值范围是0%~100%。(0%亮度没了，所以就是黑色。100%亮度太强，所以就是白色了)。

• 举例：

  	.campus1 {
          color: hsl(0deg, 100%, 50%);
      }
      .campus2 {
          color: rgb(255, 0, 0);
      }
      .campus3 {
          color: hsl(60, 100%, 50%);
      }
      .campus4 {
          color: hsl(120, 100%, 50%);
      }
      .campus5 {
          color: hsl(180, 100%, 50%);
      }
      .campus6 {
          color: hsl(0, 100%, 50%);
      }
      .campus7 {
          color: hsla(144, 59%, 59%, 0.759);
      }