Cascading Style Sheets,简称CSS,中文译为层叠样式表，有三种形式（外部样式，内部样式，内联样式）
1.外部样式，通过外部样式表管理页面的外观，定义在HTML外部的样式表，通过链接( <link href="XXX.css" rel="stylesheet" type="text/css" /> )引用
2.内部样式，写在HTML的<head></head>中，仅对当前页面有效
3.内联样式，直接定义在元素上！
权重：内联样式>内部样式>外部样式
CSS3即CSS的第三版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<div class="left">
<span>one</span>
<p>
<span>two</span>
</p>
<span>three<span></div>
</div>
</body>
</html>
1.ID选择器【符号：#】
通过元素定义的ID选择元素，ID选择器具有唯一性 例：#container
2.类选择器【符号.】
通过元素定义的类名（class）选择元素，可单独使用，也可同其他元素结合使用 例：.left
3.伪元素 ，用于向某些选择器添加特殊效果，例如：.left:hover{.......}
4.元素选择器，通过元素直接选择,例如 div span p等等
5.属性选择器的使用方法：
<style>
/* 属性选择器的权重是 10 */
/* 1.直接写属性 */
button[disabled] {
cursor: default;/*鼠标形状为默认*/
}
button {
cursor: pointer; /*鼠标形状为小手 */
}
/* 2. 属性等于值 */
input[type="search"] {
color: red;
}
/* 3. 以某个值开头的 属性值 */
div[class^="icon"] {
color: green;
}
/* 4. 以某个值结尾的 */
div[class$="icon"] {
color: yellow;
}
/* 5. 可以在任意位置的 */
/* div[class*="icon"] {
color: blue;
} */
</style>
<body> <button>按钮</button>
<!-- disabled 是禁用我们的按钮 -->
<button disabled="disabled">按钮</button>
<input type="text" name="" id="" value="文本框">
<input type="search" name="" id="" value="搜索框">
<div class="icon1">以某个值开头的 属性值</div>
<div class="iicon2">可以在任意位置的</div>
<div class="absicon">以某个值结尾的</div>
</body>
6.后代选择器：即一个父元素后的所有后代元素,例如：.left p/span
7.子元素选择器：与后代元素选择器不同，子元素选择器只能选择某元素的子元素 例如 .left>p ， p>span等
8.相邻兄弟选择器：可以选择紧接着另一个元素后的元素，二者有相同的父元素 例如：span+p
9.伪类选择器：
结构伪类选择器：
ul li:first-child { }//选择ul 中第一个li
ul li:last-child { }//选择ul中最后一个li
nth-child(n) 我们要第几个，n就是几
nth-child
/* n 可是关键词 even 是偶数 odd 是奇数 */
ul li:nth-child(even) { }
ul li:nth-child(odd) { }
/* n 是公式 但是 n 从0开始计算 */
ul li:nth-child(n) { }
/* 2n 偶数 类似于 even */
ul li:nth-child(2n) { }
/* 2n + 1 类似于 odd */
ul li:nth-child(2n+1) {}
/* 5n 选择第 0 5 10 15 ... */
ul li:nth-child(5n) {}
/* n+5 就是从第5个开始往后面选择 包含第5个 */
ul li:nth-child(n+5) { }
/* -n + 5 就是选择前面5个 */
ul li:nth-child(-n+5) { }
.left span:nth-child(3) {
color:red;//three变为红色
}
总结:nth-child(n) 选择 父元素里面的 第 n个孩子， 它不管里面的孩子是否同一种类型 */