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>伪类选择器
前端之旅——CSS
原文地址：https://www.cnblogs.com/juex/p/9716338.html