说说CSS选择器以及这些选择器的优先级

1. !important

.Box {
color: red !important;
}

2.内联样式/外联样式

内联样式：

<p style="color: blue; font-size: 16px;">这是一个内联样式的段落。</p>

外联样式：

 <link rel="stylesheet" href="04.css">

3.ID选择器

#intro {font-weight:bold;}

4.类选择器/属性选择器/伪类选择器

类选择器：

.important {color:red;}

属性选择器：

a[href] {color:red;}

伪类选择器：

a:link { color: red; }

5.元素选择器/伪元素选择器

元素选择器：

html {color:black;} h1 {color:blue;} h2 {color:silver;}

伪元素选择器：

div::before { 
/* 在盒子前面插入的元素 /content: "div::before 盒子前面插入内容";/ 插入的内容默认为行内元素 可以转为块级元素 和 行内块元素 */ 
	display: block; 
  width: 300px; 
  height: 20px; 
  background-color: aqua; 
}

6.关系选择器/通配符选择器

关系选择器：

p>span{           
  color: red;           
  font-weight: bold;
  font-size: 20px;
}

通配符选择器：

*{ margin：0；       /*定义外边距*/ padding：0；     /*定义内边距*/ }

优先级顺序：

!important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 关系选择器