CSS 定义
CSS是Cascading Style Sheets 的简称，中文称是层叠样式表
属性和属性值用冒号隔开，以分号结尾
CSS 四种引入方式
1.行内式
行内式是在标签的style属性中设定CSS样式
<div style="..."><div>
2.嵌入式
嵌入式是将CSS样式集中写在网页的<head>头标签的<style></style>标签中
<head>
...
<style type="text/css">
....
</style>
</head>
3.导入式
将一个独立的.CSS文件引入HTML文件中，导入式使用@import 引用外部CSS文件
<style> 标记也是写在<head>标记中。
导入式会在整个网页装载完成后再装载CSS文件
<head>
...
<style type="text/css">
@import " css文件路径"
</style>
</head>
4.链接式（导入就用这种）
将一个独立的 .css 文件引入到HTML文件中，使用<link>标记在<head>标记中
链接式会以网页文件主体装载前装载CSS文件
rel = stylesheet (告诉它是层叠样式表)
<head>
...
<link href="my.css" rel="stylesheet" type="text/css">
</head>
样式应用顺序：
如果外部样式、内部样式、内联样式同事应用于同一个元素，属性不一样的话就会以合并的方式呈现。
如果是应用于同一个元素且同一个属性。他们的权重是， 行内样式 > 内部样式 > 外部样式
有个例外的情况：如果外部样式放在内部标签的后面，外部标签将会覆盖内部标签
基本选择器：
1.通用元素选择器
*匹配应用到的所有标签。
*{ color:red }
2.标签选择器
匹配所有使用 xx 标签的元素（可以匹配到所有标签）
div{ color:yellow}
3.类选择器
匹配所有class属性中包含info的元素。
语法：点.类名{样式}（类名不能以数字开头，类名要区分大小写）
.mycolor{color:yellow>
<div class="mycolor">nick</div>
4.id 选择器
使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）
语法：#id 名{} （id 不能以数字开头）
#mycolor {color:yellow}
<div id="mycolor">NICKE<div>
组合选择器：
1.多元素选择器
同时匹配h1，h2 标签，之间用逗号分隔
h1,h2{color:yellow}
<h1>牛魔大力陷滂沱</h1>
<h2>虎魔狂乱心不死</h2>
2.后代元素选择器
匹配所有div 里的 p 标签 之间用空格分隔
div p {color:yellow}
<div>
<p>nick</p>
<div>
<p>123</P>
</div>
</div>
3.子元素选择器
匹配所有div标签里嵌套的子标签p标签，之间用>分隔
只找儿子
4.毗邻元素选择器
匹配所有紧随div标签之后的同级标签p，之间用+分隔（只能匹配一个）
div + p{color:yellow}
<div>123</div>
<p>nick</p>
属性选择器：title标题 可以是class id 等
1.[title]&P[title]
设置所有具有title属性的标签元素；
设置所有具有title属性的p标签元素。
设置所有具有title属性的标签元素；
[title]
{color:yellow}
p[title]
设置所有具有title属性的p标签
{color;yellow}
<div title>nick</div>
<p title>nick</p>
2.[title=nick]
设置所有title属性等于"nick"的标签元素
[title="nick"]
{color:yellow}
3.[title~=nick]
设置所有title属性值中，有一个值等于nick的标签元素
[title~="nick"]
{color:yellow;}
<p title="nick asd cas sad">nick</p>
<p title="group askii append">juex</p>
4[title|=nick]
设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“nick”开头的标签元素
[title="nick"]
{color;yellow}
<p title="nick-asdsad-asd">nick</p>
5.[title^=nick]
设置属性值以指定值开头的每个标签元素
<title^="nick">
{color:yellow;}
<p title="nickdasds asd">nick</p>
6.[title$=nick]
设置属性值以指定值结尾的每个标签元素。
[title$="nick"]
{color:yellow}
<p title="jendanick">asd</p>
7.[title *=nick]
设置属性值中包含指定值得每一个元素
[title="nick"]
{color:yellow}
<p title="snickda">nick</p>
伪类选择器
原文地址：https://www.cnblogs.com/juex/p/9716338.html