css样式的优先级（无后续修改样式）：
1、最高级:行内样式，直接写在标签上面；
2、中级：内部样式和外部样式的“ID选择器”；
3、低级：内部样式和外部样式的“类选择器”；
4、最低级：内部样式和外部样式的“标签选择器”且定位清晰度高；
5、最最低级：内部样式和外部样式的“标签选择器”且定位清晰度低；
p{color: red} /* 元素选择器 */
.red{color: red} /* 类选择器 */
#user{color: red} /* id选择器 */
*{color: red} /* 通用选择器，给所有元素设置样式 */
h1,.red{color: red} /* 分组选择器，同时给多个选择器设置样式 */
/* 选中的都是p */
div p{color: red} /* 后代选择器，p是div的后代就行，不一定要是儿子 */
div>p{color:red} /* 子选择器，p要是div的儿子 */
div+p{color:red} /* 相邻兄弟选择器，p是div后面的第一个兄弟 */
div~p{color:red} /* 后续兄弟选择器，选择div后面所有的p，p要是div的兄弟 */
/* 属性选择器，属性名不引，属性值可引可不引 */
[attr] /* 含有指定属性的所有元素 */
/* 含有指定属性，且 */
[attr=value] /* 属性值是value */
[attr^=value] /* 属性值以value开头 */
[attr$=value] /* 属性值以value结尾 */
[attr*=value] /* 属性值中包含value */
/* 属性选择器可单独使用，也可以和其它选择器搭配使用 */
button[type="submit"]
/* <a>链接不同时期的样式 */
a:link /* 未访问过的<a> */
a:hover /* 鼠标移到<a>元素上 */
a:active /* 点击<a>时 */
a:visited /* 访问过的<a> */
/* :hover这个伪类选择器所有元素都可以使用，不局限与<a>链接 */
div:hover
/* 表单元素 */
input:focus /* 聚焦时 */
input:checked /* 选中时 */
input:enabled /* 可用的 */
input:disabled /* 禁用的 */
input:read-only /* 只读的 */
/* 空元素指的是没有任何属性、内容的元素，比如<p></p> */
:empty{ } /* 所有的空元素 */
p:empty{ } /* 所有空的<p>元素 */
/* 非，除开（）中选择器匹配的元素 */
:not(p) /* 选择不是<p>的所有元素 */
/* type系列 */
p:first-of-type /* 同级别中的第一个<p> */
p:nth-of-type(n) /* 同级别中的第n个<p> */
p:nth-last-of-type(n) /* 同级别中的倒数第n个<p> */
p:last-of-type /* 同级别中的最后一个<p> */
p:only-of-type /* 同级别中唯一的一个<p> */
/* 同级别指的是DOM的每一级，示例 */
p:first-of-type{color:red}
<body>
<h1></h1>
<p></p> <!--选中-->
<p></p>
<div>
<h2></h2>
<p></p> <!--选中-->
<p></p>
</div>
</body>
/* child系列，匹配的都是p */
p:first-child /* p要是其父元素的第一个子元素 */
p:nth-child(n) /* p要是其父元素的第n个子元素 */
p:nth-last-child(n) /* p要是其父元素的倒数第n个子元素 */
p:last-child /* p要是其父元素的最后一个子元素 */
p:only-child /* p要是其父元素的唯一一个子元素 */
/* 每个级别都会去匹配，示例 */
p:first-child{color:red}
<body>
<h1></h1>
<p></p>
<p></p>
<div>
<p></p> <!--选中-->
<p></p>
</div>
</body>
p:first-letter /* <p>元素的第一个字符 */
p:first-line /* <p>元素的第一行 */
/* 伪元素，在p的前|后面添加内容 */
p:before{
content: "hello "; /* 伪元素的内容 */
font-size: 20px; /* 设置的样式是给伪元素设置的 */
color: red;
}
p:after{
content:"byebye";
display: block; /* 添加的内容默认是行内元素，可以指定为块级 */
font-size: 20px;
color: red;
}
/* 使用伪元素清除浮动 */
p:before{
content:""; /* content必需，不添加文本内容时设置为空串 */
clear: both
}