经过昨天和今天终于看完了第二章节，也就是关于css的选择器，闲言少叙，直接开始
选择器对于大家来说应该是不陌生的，原生js的时候，document.getElementById('id') 还有jq霸道的时候 什么$('#id'), $('.class') 这些大家应该都用吐了，通过选择器修改dom的样式呀，或者是append的呀，都是很重要的，当然现在的框架dou mvc 呀 mvvm呀，数据都动态绑定了，dom操作也就很少了，但是选择器还是特别特别重要的毕竟想让你的房子（div）更加的好看 装饰（css）是不可少的，选择器就是粘合剂
css3选择器，除了我们大家熟知的 id选择器和class选择器，还添加的属性，层次，伪类，过滤选择器，伪类选择器下面又分为了好多种，其中又许多我也没听过，没有过，下面听我细细道来
1.基本选择器
1.1 通配选择器：也就是 这个 *号 也就是平常大家比如新建立一个页面 然后就会 * { margin: 0; padding: 0} 字面就可以看出来匹配所有的元素，给他们添加样式，一般就是初始化的时候用一下，看一下就会。
1.2 元素选择器：这个大家应该也知道 body p div ul li 这些都是元素 例如 body {background-color: #fff} 设置页面的背景颜色， p {font-size: 16px} 设置页面p元素的大小呀什么的，也很简单，很常用。
1.3 id 选择器：这个就厉害了，页面中唯一的，一个页面中不能有相同的id，就像身份证一样，精确的给某个id添加样式 <p id="xixi">武汉加油</p> #xixi { background: red;} 这样就准确的给id添加了某个样式 （jq时候用的最多的就是id选择器了，注意页面他是唯一的）
1.4 类选择器： 也就是 class选择器，这个和id很相似，区别就是可以有很多个，比如：
<div class="className">123</div><div class="className">123</div><div class="className">123</div>
然后 .className { color: red} 这样就可以给所有class名字为 ‘className’的添加了字体颜色，也很简单，很常用。（为啥编辑器没有联想功能，代码手打很累）
他还有个叫多类选择器，其实原来也见过的他和层级选择器很像 就像是这样的 <div class="bg cl">123</div> 大家看这个div有两个class 然后 css样式表里面这么写 .bg.cl {background: red}
这个是什么意思呢，就是这个div 必须有 bg和cl 然后才给他添加样式，只有其中任何一个都不会找到，应该可以理解吧 就是一个 && 两个为真才为真，注意和层级区分 .bg .cl {background:red}
这个呢是层级选择器 中间有个空格，代表什么呢， 代表 找寻 .bg 下面的 .cl 给他添加样式，应该是大家都遇到过使用过, 注意使用加空格就行。
1.5 群组选择器：这个大家肯定也都遇到过 .bg, .cl, .txt { font-size: 18px}, 使用逗号，隔开，同时给这些class添加样式，当然元素也行 p, div, html {padding:0}, 都是可行的，很简单，初始化的时候用的多。
2 层次选择器： 层次选择器呢也是很常用的就是 他是他的后代呀，他是他的兄弟呀，他是他的直系后代呀，比如给某一个ul下的所有li标签添加样式 我就可以 ul li { float: left} 这是使用，直接可以给所有的li添加样式，下面区分一下几类，大家了解一下。
2.1 后代选择器，什么后代大家都知道吧，这要是你的儿子呀，孙子呀，好几个孙子呀 他们都是你的后代 (真不想打代码，又怕听不懂)
<ul>
<li></li>
<div>
<div></div>
</div>
<div></div>
<li></li>
</ul>
使用方法就是 ul li { background: green} 添加一个空格就是说明ul 的后代 叫li 的全部变为绿色，ul div { background: blue} ul 的后代 叫div的，不管他是我直属后代还是后代的后代，他们都给我变蓝，可以看懂吧，这就是后代选择器，如果不清除的话，可以动手试一试一下就明白了。
2.2 直属选择器，这个就必须是我的后代，我后代的后代就不行 使用方法就是 ul>li 加一个箭头这样直属的
<ul>
<li></li>
<div>
<div></div>
</div>
<div></div>
<li></li>
</ul>
ul>div { background: blue} 使用了箭头这样就是只能是ul下面的div变为绿色， div里面的div不归我管，他不是我的直属后代，推荐大家试试，一目了然。
2.3 相邻兄弟选择器，就是我们是一个娘生的我们是兄弟（同级别）而且相邻的
<ul>
<li></li>
<div class="bro">
<div></div>
</div>
<div>123</div>
<li></li>
</ul>
.bro + div {font-size: 14px}
中间添加一个加号，这就是相邻兄弟选择器，大家想一想这样是谁的字体是14号，倒计时，对没错就是123这个div他是 bro的相邻的，又是同级的，所以选择的就是他。试一下试一下
2.4 通用兄弟选择器，顾名思义，和相邻的差不太多，只是不用非得相邻了
<ul>
<li></li>
<div class="bro">
<div></div>
</div>
<div>123</div>
<div>456</div>
<li></li>
</ul>
.bro ～ div {font-size: 14px}
中间添加一个波浪线，大家思考一下选择了哪些呢，没错，你猜对了 div123 div456 都选择上了，他们是同级别，bro后面的同级别的div都被选中了，大家可以试一试很简单。
3. 动态伪类选择器
伪类选择器大概大家都用过也遇到过， 即使带个冒号那么 :hover :link 等等，a标签上通常都会有这些，点击是什么状态，指向是什么状态样式呀 都可以用这个伪类选择器控制，css3呢又添加了好多种各式各样的伪类选择器，下面给大家一一介绍，如果有那种不常用的，我也就一笔带过了。
3.1 目标伪类选择器，‘:target’ 使用方法就是说实话这个我也是刚听说，而且我也没用到过，看了一下书籍里面怎么说呢，大家都用过锚点吧应该，就是通过a链接通过锚点匹配到对应的区域，这个目标伪类选择器也是这个意思
<div>
<a href="#id"></a>
<a href = "#id2"></a>
</div>
div :target a {
color: red
}
大家看他的使用方法什么意思呢，就是当你点击div里面的a链接，然后 target 就会匹配你当前点击的a标签的href 然后改变他的样式，大家可以试一下，就知道是什么意思了，这个应该应用的比较少（我没怎么见过，也没怎么用过），大家了解一下就可以，见到是时候知道什么意思就可以了。
书上的定义
应用场景
3.2 语言类伪类选择器
html标签上有时候会是这样 <html lang="en-us"></html>, 然后这个伪类就是匹配页面使用的语言，:lang(en) { background: red} 当页面语言是 en 的时候 页面的背景颜色就会变为红色（不要忘记前面的冒号），这个也不是很常见，大家想加深了解，可以自己百度一下，这里我就带大家认识一下，并不常用
3.3 UI元素状态伪类选择器
这个主要用于表单元素上 input 单选呀，多选呀这些标签上，他们都会有各种的状态，比如获取焦点呀，禁用呀，选中呀，然后伪类状态选择器就可以区别各种情况下的样式
<input type="text" />
input:focus { background: yellow} // 也可以写成 input[focus]
input:disabled {background: red} // 也可以写成 input[disanled]
input[type = "text"]:focus {background: blue} // 也可以写成input[type = "text"] [focus]
这段代码的意思就是使用了状态伪类选择器，当input获取焦点的时候 背景颜色变为黄色, 禁用的时候是红色, 大家应该理解了，不多讲解了，很简单了理解就好。
4. 结构伪类选择器
通过html文档的dom结构某些特性定位它们，通过文档的相互关系来匹配特定的元素（是不是感觉很绕口，理解起来很复杂，我也这么觉得，等我下面一个个描述大家都清楚了，很简单）
它的语法是 E:first-child, E:last-child, E:nth-child (E就是element，页面元素的意思)
大家是不是现在就知道了，原来是它呀，大家肯定都用过的,详细的语法就是上图，下面我给例举几个例子
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul li:first-child { background: red}
ul li:last-child {background: blue}
ul li:nth-child(n) {background: yellow}
第一个就是选择ul下面的第一个li改变背景颜色
第一个就是选择ul下面的最后一个li改变背景颜色
第三个呢 n 可以是 数字从1开始 ，数字是几 就是第几个， n还可以是 even 代表这偶数 也就是 2 4 6改变背景颜色， odd就是奇数1 3 5，大家应该都使用过，然后 n 还可以是公式 2n, 2n+1,大家就自己计算一下，大家也可以参考一下下面的表
然后还有其他几种，匹配类型呀，根元素呀，也不是很常用我也就不讲解了，大家想了解可以自己翻阅书籍，或者百度查看。
5. 否定伪类选择器
它的语法是 :not()，这个大家看名字应该可以知道它的意思，就是大家都可以拥有样式除了 not()选中的，下面我写几行代码，就一目了然了
<ul>
<li>12</li>
<li>123</li>
<div>234</div>
<li>1234</li>
</ul>
ul:not(div) {background: red}
这段代码的意思就是 ul下面除了div 然后其他的全都会改变样式，通用可以使用在表单元素上 input:not([type=text]) {color: blue} 除了类型是text的input，其他的字体颜色全部为蓝色，大家可以自己尝试一下。
6. 伪元素
伪元素表示dom之外的某种文档结构，说出来可能有点绕口，其实大家都应该遇到过 ::after ::before 这些都属于伪元素, 注意它有两个冒号，但是也没有什么区别，单冒号，双冒号现在浏览器都可以识别，还有它可以区分伪类和伪元素
伪元素 ::first-letter 用来选择一段文本的第一个字母，然后给他添加样式
伪元素 ::first-line 用来选择一段文本的第一行文本，然后给他添加样式
然后就是 ::before 和 ::after 了这个呢，是在元素的之前之后添加格外的内容，比如现在的比较流行的图标呀什么的都是通过它俩来添加的使用的时候需要配合content属性比如
p:before {
content: ' ++ '
}
这样就在p元素的前面添加了两个加号，当然这个里面你还可以加入别的东西，图形呀什么的都可以，大家可以尝试一下
伪元素 :selection 这个就是匹配突出显示的文本，就是当你选中了，一段文字，一般浏览器都会让他变成蓝底白色，说明你选中了它，然后可以通过这个伪元素改变它的颜色和背景颜色，大家可以尝试一下，这个用的也不多，我就不仔细讲解了，各个浏览器支持好像也不是太好，需要添加内核的前缀（自行百度）
7. 属性选择器
这个呢大家应该也不陌生，语法：E[attr], 就是通过某个元素的属性然后选中它，修改它的样式
<ul>
<li></li>
<li id="come"></li>
</ul>
li[id] { color: red}
有id属性的li颜色变为红色，还可以多属性 a[title][id] a标签必须同时定义了这两个属性，才能被选中，很好理解，大家可以尝试一下， 还有就是 a[id=come] 表明了id的名称然后更加准确的匹配，然后一些也不很常用的大家可以自行阅读下图说明
好了，基本上本书第二节就讲了这些东西，css选择器也是很重要的，希望大家都可以好好的应用和认识，我也是大概写了一些常用的，如果有什么不全的请大家自行搜索一下，css选择器就讲解到这里，希望对大家学习也有一些帮助，那么下一章见，加油 奥力给