第一部分：基本选择器
比如最常用的类选择器，就是根据类（class属性），来选择HTML元素。html元素内添加class属性，css中前置个点即可。这样，红色字体的CSS样式就绑定在这个<p>段落了。
1. <body> 2. <p class="text1">hello world!</p> 3. </body> 4. 5. <style> 6. .text1{ 7. color: red; 8. } 9. </style>
与类选择器对应的是 id 选择器。类选择器根据class属性来匹配，同理 id选择器根据id属性来匹配，但优先级比类选择器高。
注：CSS优先级从大到小为：行内CSS>内嵌式CSS>外联CSS
and CSS优先级从大到小为：ID选择器>伪类选择器>类选择器>标签选择器>通用选择器
（两种分类不同）其中在属性值的后面加上“！important”，实现最大的优先级（王炸）
1. <body> 2. <p id="id1">hello world!</p> 3. </body> 4. 5. <style> 6. #id1{ 7. color: red; 8. } 9. </style>
还有标签选择器。请看以下代码：
1. <body> 2. <p>hello world!</p> 3. </body> 4. 5. <style> 6. p{ 7. color: red; 8. } 9. </style>
该代码就是通过p{属性名：属性值}，来对所有HTML的<p>标签应用红色字体属性。当然AOE的选择器优先级比较低。
当然还有很多选择器，比如后代选择器能够实现一个HTML元素的所有子元素实现样式；并集选择器能够同时让多个不同的HTML元素类型（比如<h1>和<h2>）一次性实现同一个样式；还有关系选择器、兄弟选择器、相邻兄弟选择器、通配选择器等等 。
第二部分：属性选择器
以上类、id、标签选择器都是最基本的选择器，最为常用。其次就是属性选择器。首先概括一下概念吧，属性选择器就是根据属性来选择HTML元素，来应用CSS样式（比如你的某个属性符合我的要求，我就给你应用样式）。
属性选择器中所有的例子，其HTML部分都是这部分代码：
1. <body> 2. <p align="center">111</p> 3. <p>222</p> 4. <p align="left">333</p> 5. </body>
这三个<p>段落内容分别是111、222、333，对其属性分别是居中、无、左对齐。
属性选择器的基本格式 ： 标签名 [ 属性要求 ] { CSS属性名：属性 }
比如最基本的：
标签名[属性]
1. <style> 2. p[align]{ 3. color: red; 4. } 5. </style>
意思就是所有<p>标签，只要有align属性，就都符合条件，即染为红色。运行结果为111和333红色，222为黑色。
标签名[属性='属性值']
1. <style> 2. p[align='center']{ 3. color: red; 4. } 5. </style>
意思就是所有<p>标签，只要align属性为'center'的染为红色。运行结果为111红色，222和333为黑色。
标签名[属性^='属性值'] / 标签名[属性$='属性值']
1. <style> 2. p[align^='c']{ 3. color: red; 4. } 5. </style>
意思就是所有<p>标签，align属性为'c'开头的染为红色。运行结果为111红色，222和333为黑色。
同理，把^改为$，当align属性为'c'结尾的染为红色。
标签名[属性*='属性值']
1. <style> 2. p[align*='t']{ 3. color: red; 4. } 5. </style>
所有<p>标签，align属性包含字符串'c'的染为红色。即111、333红色。
第三部分：其他选择器
伪类选择器
伪类动态选择器，我觉得就是一个HTML元素在点击之前、之后、点击瞬间和悬停这四种情况的临时样式。当然这更加适合超链接，在一个网页的超链接上，点击前后的样式可能不一样，当然这里只是展示一下语法，可以把下面的<div>改成<a>。
1. <body> 2. <div class="test"> 3. 4. </div> 5. </body> 6. 7. <style> 8. .test{ 9. /* 基础样式 */ 10. width: 100px; 11. height: 100px; 12. } 13. .test:link{ 14. /* 未被点击 */ 15. background-color: grey; 16. } 17. .test:hover{ 18. /* 鼠标悬停 */ 19. background-color: red; 20. } 21. .test:active{ 22. /* 鼠标点击瞬间 */ 23. background-color: black; 24. } 25. .test:visited{ 26. /* 点击之后 */ 27. background-color: teal; 28. } 29. </style>
伪装结构选择器（花里胡哨，感觉没啥用）
利用文档结构的特殊性来匹配元素，比如父元素只有一个子元素，等等。
比如 标签名：only-child 表示该类的父类只有其一个元素的情况。
比如 标签名：only-first 表示匹配该类的父类的第一个元素。其中 ：标签名：nth-child(3) 表示第三个。
比如 标签名：only-last 表示匹配该类的父类的最后一个元素。 其中 ：标签名：nth-last-child(3) 表示倒数第三个。
其他的还有很多，但个人感觉都是花里胡哨，基本不会去用的......
标签名：only-of-type 表示子元素唯一；
标签名：first-of-type 表示匹配第一个子元素；
标签名：last-of-type 表示匹配最后一个子元素；nth-of-type(3)同理
标签名：empty 表示没有子元素的HTML元素
状态伪类
就是HTML元素的状态......比如是否可见
标签名：enabled 表示可见的HTML属性 ； disenabled同理
标签名：checked 表示选中的HTML元素 比如单选框、复选框
标签名：not() 否定伪类 比如下方代码，把id不是b的都变为红色。
1. <body> 2. <p id="a">111</p> 3. <p id="b">222</p> 4. <p id="c">333</p> 5. </body> 6. 7. <style> 8. p:not(#b){ 9. color: red; 10. } 11. </style>
最后一个比较好玩的东西是
目标伪类选择器
如果让你实现一个功能：在HTML中的瞄的基础之上，跳转到瞄内容的时候，背景显示红色。
像这样，点击“导航1”，跳转到内容111，并且显示红色背景。如下图所示：
点击“导航3”，跳转到内容333，并且显示红色背景。如下图所示：
这就需要用到“ 标签名：target ”，代码如下所示：
1. <body> 2. <a href="#a">导航1</a> 3. <a href="#b">导航2</a> 4. <a href="#c">导航3</a> 5. 6. <p id="a">内容111</p> 7. <p id="b">内容222</p> 8. <p id="c">内容333</p> 9. </body> 10. 11. 12. <style> 13. p:target{ 14. background-color: red; 15. } 16. </style>
伪元素（经常需要用到首字母大写）
比如要实现一个段落第一个字符红色 （就像本行这样）
1. <style> 2. p::first-letter{ 3. color: red; 4. } 5. </style>
第一行红色......
1. <style> 2. p::first-line{ 3. color: red; 4. } 5. </style>
前置@，后置同理
1. <style> 2. p:before{ 3. content: "@"; 4. } 5. </style>
第四部分：字体/段落/列表类属性
前面所接触到的选择器，我感觉就是从HTML模块那里，选出我们要作用的HTML元素。那么我们选出来了，该则么去把我们想要的效果展现出来呢，这就需要我们的CSS属性来套用实现。先来总结一下字体这一块的属性。
字体大小：
font-size: 30px;
字体颜色：（取其一）
1. color: red; 2. color:rgb(255,0,0); 3. color: #FF0000;
粗体斜体：
1. font-style: italic; 2. /* 设置字体样式 正常normal/斜体italic */ 3. font-weight: 700; 4. /* 设置字体粗细，400~500正常 700以上粗体 */
字体样式：（通常写一种即可）
1. font-family: "黑体","bodoni mt"; 2. /* 字体样式，可多种，用逗号隔开如果没有则默认字体*/
服务器字体：（基本用不到，可能面试会问吧）本地未安装也可以用该字体
1. @font-face { 2. font-family:自定义字体; 3. src: url('http://www.baidu.com'); 4. }
文字阴影：
1. text-shadow: 5px 5px 5px red; 2. /* 水平阴影/垂直阴影/模糊距离/阴影颜色 */
首行缩进：
text-indent: 2em;
行高：（当 行高 = 字体大小 可以实现垂直居中的效果）
line-height: 20px;
间距：
1. letter-spacing: 5px; 2. /* 字符之间的间距 */ 3. word-spacing: 50px; 4. /* 单词之间的间距 */
文本对齐：
text-align: left;
其他：
1. white-space: normal; 2. /* 单词之间多个空格normal保留一个/pre保留多个/nowrap强制不换行 */ 3. text-overflow: ellipsis; 4. /* clip属性直接修剪溢出文本/ellipsis修剪溢出文本显示省略号表记 */
列表类：
1. ul{ 2. list-style-type: ; 3. /* 设置列表项标记的类型 */ 4. /* none无标记/disc默认实心圆/circle空心圆/square实心方块 */ 5. /* decimal数字/upp(low)er-roman大小写罗马字符 */ 6. /* upp(low)er-latin大小写英文/lower-greek希腊字符 */ 7. 8. list-style-image: url(img/tupian1.jpg); 9. /* 设置有序/无序列表的标记图像 */ 10. 11. list-style-position: outside; 12. /* 设置列表项标记的位置 */ 13. /* inside左边缩进大一点/outside小一点 */ 14. }
第五部分：盒模型/定位浮动
盒模型
指的是比较像盒子的一个模型，就像浏览器调试窗口的这样
蓝色部分为内容部分，padding为内容和边框的间距，border为边框，margin为边框外侧离父容器的距离。我们设计如下代码：
1. <style> 2. .d{ 3. width: 100px; 4. height: 50px; 5. padding: 20px; 6. border: 10px solid; 7. margin: 20px; 8. } 9. </style>
运行结果如下图所示。其中浅绿色部分为浏览器调试窗口的选中效果（即padding属性的20px）。黑色的粗实线（solid）为border属性的10px效果，最外面的白色部分为该组件离父组件（<body>）20个px。
圆角优化和阴影
在上方类选择器的基础代码之上，添加如下代码：
1. border-radius: 2em;/* 基础圆角 */ 2. border-radius: 1em 10em 1em 10em;/* 对角线椭圆 */ 3. border-radius: 10em 10em 10em 10em;/* 圆 */ 4. 5. box-shadow: 20px 20px 20px red inset;/* 阴影效果 水平偏移/垂直偏移/偏移距离/阴影颜色/是否内阴影(inset) */
border-radius（圆角实现）三种方式取其一即可。最终效果图：
CSS定位和浮动
（纯个人理解）HTML标签分为块元素和行元素，其中行元素是按照从左往右依次排列的，比如这样
<a>111</a> <a>111</a> <a>111</a>
在网页上会在一行显示9个1，因为<a>是一种行元素。
同理，如果是块元素，比如<p>
<p>111</p> <p>111</p> <p>111</p>
那么会分三行显示，这就是行元素和块元素的区别。
那么问题来了，我如果想让三个<p>在同一行显示，如何实现？
先来解释一下CSS定位的概念，也就是说你一个HTML元素在网页的哪里？
自动定位：默认的定位方式。
相对定位：相对于我原本应该在的地方，的偏移值。（设置偏移值方法 top:20px;left:20px; ）
绝对定位：相对于父组件的位置（要求父组件也是绝对定位，否则再往上找）
固定定位：相对于浏览器窗口（<body>）而言的位置
1. position: static; 2. /* 自动定位 */ 3. position: relative; 4. /* 相对定位 */ 5. position: absolute; 6. /* 绝对定位 */ 7. position: fixed; 8. /* 固定定位 */
其次是CSS浮动的概念 。浮动就是可以打破“块元素竖着排，行元素横着排”这个规则，比如实现三个<div>块横着排列
1. 2. <body> 3. <div class="d1"></div> 4. <div class="d2"></div> 5. <div class="d3"></div> 6. </body> 7. 8. <style> 9. .d1{ 10. background-color: gray; 11. float: left; 12. }.d2{ 13. background-color: rosybrown; 14. float: left; 15. }.d3{ 16. background-color: black; 17. clear: left; 18. }div{ 19. width: 100px; 20. height: 100px; 21. } 22. </style>
如果d3没有clear: left;这行代码，将会被覆盖，无法显示，必须清除左方元素对自己的影响，方可正常使用。效果如下：
