一个完整的CSS样式需要具备两大部分：
# 1、选择器
# 2、声明
声明由属性和属性值组成，属性和属性值用冒号隔开，以分号结尾，如下图
? 行内式是在标签的style属性中设定CSS样式（一般不采用）
<div style="color: green">行内式</div>
[
](javascript:void(0)??
? 嵌入式是将CSS样式集中写在网页的<head>标签的<style></style>标签对中。
<head>
<style type="text/css">
p{
color: red
}
</style>
</head>
[](javascript:void(0)??
[](javascript:void(0)??
? 将一个独立的.css文件引入HTML文件中，导入式使用@import引入外部CSS文件，<style>标记也是写在<head>标记中。
? 导入式会在整个网页装载完后再装载CSS文件。
<head>
...
<style type="text/css">
@import "My.css"; 此处注意.css文件的路径
</style>
</head>
[](javascript:void(0)??
[](javascript:void(0)??
? 将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。
? 链接式会以网页文件主体装载前装载CSS文件。
<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
</head>
[](javascript:void(0)??
#p2 {
color: red;
}
.ppp {
color: green;
}
div {
color: yellow
}
* {
color: yellow
}
[](javascript:void(0)??
div p {
color: red;
}
<div>
<p>哈哈</p>
<div>
<p>嘿嘿</p>
</div>
<p>呵呵</p>
</div>
[](javascript:void(0)??
[](javascript:void(0)??
div>p {
color: green;
}
<div>
<p>哈哈</p>
<p>呵呵</p>
</div>
[](javascript:void(0)??
div+p {
color: red;
}
<div>哈哈</div>
<p>嚯嚯</p>
[](javascript:void(0)??
div~p {
color: pink;
}
<div>哈哈</div>
<br>
<p>嚯嚯</p>
<p>嘿嘿</p>
[](javascript:void(0)??
序列选择器
[](javascript:void(0)??
/*找到所有包含id属性的标签*/
[id] {
color: red;
}
/*找到所有包含id属性的p标签*/
p[id] {
font-size: 30px;
}
/*找到所有class属性值为part1的p标签*/
p[class="part1"] {
color: green;
}
/*找到所有href属性值以https开头的a标签*/
a[href^="https"] {
font-size: 50px;
}
/*找到所有src属性值以png结尾的img标签*/
img[src$="png"] {
width: 100px;
}
/*找到所有class属性值中包含par的标签*/
[class*="par"] {
text-decoration: line-through;
}
[](javascript:void(0)??
示例
link、visited、hover、active
[](javascript:void(0)??
a:link{color: red} /*未访问前为红色*/
a:visited{color: green} /*访问后为绿色*/
a:hover{color: pink} /*悬浮在上面为粉色*/
a:active{color: yellow} /*按下不松手为黄色*/
<a href="https:www.jd.com">你好呀</a>
[](javascript:void(0)??
以a标签为例，我们可以控制点击前、鼠标悬浮、鼠标点击、访问后的属性变化，如颜色变化：
伪类选择器
[](javascript:void(0)??
input{
outline: none; /*设置边框无轮廓*/
color: #e606d5; /*设置input框输入的字体颜色*/
}
input:focus {
color: aqua; /*设置鼠标点击input框内字体显示效果*/
/*点击边框背景为黄色*/
}
输入名字<input type="text">
[](javascript:void(0)??
first-letter、before、after
first-letter 每个元素首字符添加样式
before 在每个元素的内容之前插入内容;
after 在每个元素的内容之后插入内容。
[](javascript:void(0)??
p:first-letter { /*将第一个字符改为100px大小*/
font-size: 100px;
}
p:before { /*在所有p标签的内容前面加上一个红色的！*/
content: "！";
color: red;
}
p:after { /*在所有p标签的内容后面加上一个绿色？/
content: "?";
color: green;
}
<p> 哈哈 </p>
<p> 嘿嘿 </p>
[](javascript:void(0)??
伪元素选择器
可继承的属性比如有字体类属性（字体颜色、字体大小之类的）、文本类属性（行高之类的）、背景类属性（背景颜色之类的）（要注意子标签不会继承父标签的宽度、高度、边距属性。）
? 应用场景：通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式
ps:打开浏览器审查元素可以看到一些inherited from。。。的属性
继承性示例
层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。
注意：这里要注意只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会合并下来（包括那些允许设置多个值的属性也会合并，比如text-shadow。
覆盖示例
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的 样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
总结优先级：
原文：https://www.cnblogs.com/liupengfei1123/p/14752647.html