目录
一、什么是CSS
层叠样式表，用来对 HTML 文档外观的表现形式进行排版和格式化。
CSS 样式由一条或多条以分号隔开的样式声明组成。
每条声明的样式包含着一个 CSS 属性和属性值。
二、创建 CSS 样式表的三种方式
1.元素内嵌样式；
2.文档内嵌样式；
3.外部引入样式。
三、层叠和继承
样式表层叠：
指的是同一个元素通过不同方式设置样式表产生的样式重叠。
如果样式相同，会产生冲突替换，这时由优先级决定显示。
通过五种方式进行，以下优先级从低到高：
(1).浏览器样式（元素自身携带的样式）；
(2).外部引入样式（使用<link>引入的样式）；
(3).文档内嵌样式（使用<style>元素设置）；
(4).元素内嵌样式（使用 style 属性设置）。
如果某一个样式被优先级高的给替换掉了，却又想执行这个样式方案，可以将这个方案 标记成重要样式（important）。 //强行设置最高优先级 color: green !important;
样式表继承：
指的是某一个被嵌套的元素得到它父元素样式。
样式继承只适用于元素的外观（文字、颜色、字体等），而元素在页面上的布局样式则不会被继承。
如果想要其继承这种样式，就必须使用强制继承：inherit。
<style type="text/css">
p { border: 1px solid red; }
b { border : inherit; }
</style>
<p>这是<b>HTML5</b></p>还有一种样式叫浏览器样式，是这 个元素在这个浏览器运行时默认附加的样式。
四、 CSS 选择器
通过选择器定位到想要设置样式的元素。
目前 CSS 选择器的版本已经升级至第三代，即 CSS3 选择器。
（一）基本选择器
使用简单且频率高的一些选择器归类为基本选择器。
1.通用选择器
* { border: 1px solid red; }
“*”号选择器是通用选择器，功能是匹配所有 html 元素的选择器包括<html> 和<body>标签。
通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就 是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般 来说，不常用。
2.元素选择器
p { color: red; }
<p>段落</p>
直接使用元素名称作为选择器名即可。
3.ID 选择器
#abc { font-size: 20px; }
<p id="abc">段落</p>
通过对元素设置全局属性 id，然后使用#id 值来选择页面唯一元素。一个页面可以用很多ID，但是ID名不能出现两个相同的。
而class名字可以相同，表示一类元素，类选择器。
4.类选择器
① abc { border: 1px solid red; }
<b class="abc">加粗</b> <span class="abc">无</span>
通过对元素设置全局属性 class，然后使用.class 值选择页面一个或多个元素。
② p.abc { border: 1px solid red; }
也可以使用“元素.class 值”的形式，限定某种类型的元素。
③ <span class="abc edf">无</span>
.def{ background-color:red;}
类选择器还可以调用多个样式，中间用空格隔开进行层叠。
可以单独调用后面的扩展样式。
5.属性选择器
① [href] { color: orange; }
属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。所需 CSS2 版本 。
② [type="password"] { border: 1px solid red; }
匹配属性值的属性选择器。所需 CSS2 版本 。
③ [href^="http"] { color: orange; }
属性值开头匹配的属性选择器。所需版本 CSS3。
④ [href$=".com"] { color: orange; }
属性值结尾匹配的属性选择器。所需版本CSS3 。
⑤ [href*="baidu"] { color: orange; }
属性值包含指定字符的属性选择器。相当于一个模糊查询，尽量少用。所需版本 CSS3。
⑥ [class~="edf"] { font-size: 50px; }
属性值具有多个值时，匹配其中一个值的属性选择器。了解就行。所需版本 CSS2 。
⑦ [lang|="en"] { color: red;}
属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。所需版本 CSS2 。
比如 <i lang="en-us">HTML5</i>。
（二）复合选择器
将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。
1.分组选择器
p,b,i,span { color: red; }
将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID 选择器、类选择器、属性选择器混合使用。
2.后代选择器（派生选择器）
p b { color: red; }
选择<p>元素内部所有<b>元素。不在乎<b>的层次深度。当然，后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器。
3.子选择器
ul>li{ border: 1px solid red; }
<ul>
<li>我是儿子
<ol>
<li>我是孙子</li>
<li>我是孙子</li>
</ol>
</li>
<li>我是儿子</li>
<li>我是儿子</li>
</ul>子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一 级的元素，不可以再往下选择。孙子选不上，只对儿子有用。
4.相邻兄弟选择器
p + b { color: red; }
相邻兄弟选择器匹配和第一个元素相邻的第二个元素。
两个标签并列就是兄弟。
5.普通兄弟选择器
p ~ b { color: red; }
普通兄弟选择器匹配和第一个元素后面的所有元素。
中间隔了几个标签，还是同一等级，无父子关系，就是普通兄弟。
（三）伪选择器
一、伪元素选择器（伪元素前置两个冒号::）
1.::first-line 块级首行
::first-line { color: red; }
块级元素比如<p>、<div>等的首行文本被选定。span无法选择，无论浏览器如何拉伸，只有第一行变成红色。
如果想限定某种元素，可以加 上前置 p::first-line。
2.::first-letter 块级首字母
::first-letter { color: red; }
块级元素的首行字母。中文也有用。
3.::before 文本前插入
a::before { content: '点击-'; }
在a标签包含的文本前插入内容。
4.::after 文本后插入
a::before { content: '-请进'; }
在a标签包含的文本后插入内容。
5. ::selection
::selection { color: red; }
当选择文字时触发选择。鼠标框选内容后，颜色变红。有的浏览器不支持。CSS3 版本下的选择器。
二、伪类选择器（伪类前置一个 冒号:）
1、结构性伪类选择器
根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。所有伪类都需要加前置选择器来限制范围，不然会默认以body为前置。
① 根元素选择器
:root { border: 1px solid red; }
匹配文档中的根元素，基本不怎么用，因为总是返回<html>元素。
② 子元素选择器
ul > li:first-child { color: red; }
选择第一个子元素。如果不加ul li它会把body默认为子元素，所有标签都变红。
ul > li:last-child { color: red; }
选择最后一个子元素。
ul > li:only-child { color: red; }
选择只有一个子元素的那个子元素。比如两个ul,里面包含的li数量不同，选择只包含一个的ul。
div > p:only-of-type { color: red; }
选择只有一个指定类型的子元素的那个子元素。如一个div里面包含了很多不同种类的标签，不会被选上，包含很多相同的标签会被选上。
③.:nth-child(n)系列
ul > li:nth-child(2) { color: red; }
选择子元素的第二个元素。
ul > li:nth-last-child(2) { color: red; }
选择子元素倒数第二个元素。
div > p:nth-of-type(2) { color: red; };
选择特定子元素的第二个元素。少用，太绕。
div > p:nth-last-of-type(2) { color: red; };
选择特定子元素的倒数第二个元素。少用，太绕。
2、UI 伪类选择器
根据元素的状态匹配元素。
① :enabled
:enabled { border: 1px solid red; }
选择启用状态的元素。
② :disabled
:disabled { border: 1px solid red; }
选择禁用状态的元素。
③ :checked
:checked { display: none; }
选择勾选的 input 元素。
④ :default
:default { display: none; }
从一组类似的元素中选择默认元素。比如 input 被勾选的即默认的。
⑤ :valid 和:invalid
input:valid { border: 1px solid blue; }
input:invalid { border: 1px solid green; }输入验证合法与不合法显示时选择的元素。
⑥ :required 和:optional
input:required { border: 1px solid blue; }
input:optional { border: 1px solid green; } 根据是否具有 required 属性选择元素。
3、动态伪类选择器
根据条件的改变匹配元素。
① :link 和 visited
a:link { color: red; }
a:visited { color: orange; }
:link 表示未访问过的超链接，:visited 表示已访问过的超链接。
② :hover
a:hover { color: blue; }
表示鼠标悬停在超链接上。
③ :active
a:active { color: green; }
表示鼠标按下激活超链接时。
④ :focus
input:focus { border: 1px solid red; }
表示获得焦点时。
4、其他伪类选择器
① :not
a:not([href*="baidu"]) { color: red; }
否定选择器，反选。所有的a标签，除了链接到百度的，剩下的链接都变红。
② :empty
:empty { display: none; }
匹配没有任何内容的元素。<p></p>里面不包含内容，但是P标签默认会换行，隐藏掉就不会换行了。
③ :lang
:lang(en) { color: red; }
选择包含 lang 属性，属性值前缀为 en 的元素。和属性选择器匹配结果一致。
④ :target
:target { color: red; }
定位到锚点时，选择此元素。