CSS中的选择器很多，比如：ID选择器，类选择器，通配符选择器，伪类选择器等等，接下来主要介绍常用的几个。
1.标签选择器
语法：标签名{}，eg：h1{}//为所有的h1元素设置样式。
2.ID选择器
语法：#id名{}//id值唯一不能重复,eg:#top{}//为id为top的元素设置样式。
3.类选择器
语法：.class{},eg：.box{}//为所有的class值为box的元素设置样式。
4.组选择器
语法：选择器1，选择器2，选择器N{},eg:#box1,.box2,p{}//为id为box1，class为box2和p的元素共同设置样式。
5、通配符选择器
语法：*{}，eg：*{font-size：16px}//将整个页面字体大小设为16px。
6.后代选择器
语法：选择器1选择器2{}，eg：p.aa{}//选中指定祖先元素p的指定后代.aa。
7.子元素选择器
语法：父元素>子元素{},eg：p>.box{}//选中父元素p的指定子元素.box。注意与后代元素选择器的区别
8.伪类选择器
伪类可以用来表示一些特殊的状态,如：
：link-未访问过的超链接。
：visited-已访问过的超链接。
：hover-鼠标经过的元素。
：active-正在点击的元素。
eg：a:hover{color:red}//鼠标经过a标签时，颜色变为红色。
二、CSS选择器的优先级顺序
当同一属性的不同值都作用到了同一个元素时，如果定义的属性之间有冲突，那么应该用谁的值的，这个时候就涉及到CSS的优先级顺序了。
1.在属性后面使用!important会覆盖页面内任何位置定义的元素样式。
2.作为style属性写在元素内的内部样式
3.id选择器
4.类选择器
5.标签选择器
6.通配符选择器
7.浏览器自定义或继承的
@ 有必要花钱去学前端吗？
一，现在的前端不是之前的网页制作，现在的前端更加高端，学习前端必须有一个学习规划，有一套系统的学习方案，这个方案的学习时间最好是半年，每天应该学习什么，心里应该有数，每个知识点应该做什么案例，而且要每天坚持学，一天都不可以停，一旦停了就不想学习了，所以说现在学习前端不是智商的问题，看谁可以慢慢的挺过去，韧性强。
二，要有人去指导，其实这个偶好像谈了无数次，现在一个新手想要全部通过自己学习前端，并且找到工作，首先这种可能性非常的小，如果谁能单凭自己一个人的力量自学前端找到工作，那么这个人一定是一个人才，但是这种人只有1%，所以一定要有一个可以帮你解决小问题的人，不然会走很多弯路，得不偿失。之前在家闭门自学的这7、8个月的时间里，细细研磨了大概很多视频，有公开的也有花钱买来的，这些视频加起来大小一共600+G，通过每天不断的分析试听,最终偶总结出了一套非常深入、且体系非常完整的web前端java，Python教程，涵盖了web前端 java，Python所需的各个知识点，从基础到深入、从Node等框架源码解读统统都有
1、
HTML + CSS 这部分建议在线教程 上学习，边学边练.
之后可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《Head First HTML 与 CSS 中文版》，这本书讲的太细了，偶没能拿出耐心细读。你可以根据情况斟酌。基础学习web前端Java Python技术思路，学习方法
2、Javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，建议看《Javascript语言精粹》，JS是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟
粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。
有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。
1、CSS。必看《精通CSS》，看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。
2、Javascript。上面提到内容还不足以让你胜任JS编程。在有了基础之后，进一步学习内容包括：
a） 框架。
推荐jQuery，简单易用，上手jQuery即可完成一些简单的项目。学习方法也很简单，照着产品文档做
几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与Web开发学习的精髓部分。补充： 可以使用
Codecademy 学习 Javascript，jQuery，用户体验真的很好（感谢 TonyOuyang ）。
b） Javascript 语言范式
。这个名字可能并不恰当，只是偶找不到可以描述“面向对象”，“函数式”这个两个概念的概念。Javascript不完全是一个面向对象的语言，它的很多
设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。
Javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要
理解，维基百科，百度百科会是你的帮手，另外推荐《Object Oriented
Javascript》，应该有中文版。对与函数式编程偶了解的也不系统，不好多说，可以自己百度一下。
c） Javascript 语言内部机制。必须弄清如下概念：JS
中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式
下，‘this’指向的是谁。这部分内容你会在《Javascript语言精粹》中详细了解。另外，你必须理解 json。
d） dom编程，这个Web前端工程师的核心技能之一。必读《Dom编程艺术》，另外《高性能 Javascript》这本书中关于dom编程的部分讲的也很好。
e） Ajax编程，这是另一核心技术。Ajax建议在网上查些资料，了解这个概念的来龙去脉，百度百科，维基百科上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对Ajax有良好的封装，编程并不复杂。
f） 了解浏览器差异性。这部分包括CSS和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。
3、HTML5和CSS3 。HTML5规范已经于10月28日发布了，移动端HTML5和CSS3已经得到了非常广泛的使用，必知必会呀。
再进一阶 · 代码层面：
有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。
1）易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是CSS,HTML,js。对于js代码，你最好了解设计模式，重构，MVC等内容。
2）可测性。
3）高性能。必读《高性能Javascript》
4）低流量。移动端关注比较多。
5）对于想要学习前端的同学，尤其是自学的伙伴，自学并非永久的，假如没有定力的还是找个培训机构吧。
再进一阶 · 工程层面：
前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。
@ css派生选择器有几种？
基本选择器
1.标签选择器：直接用元素的标签来进行选择
span { // 直接选择span标签
size:16px;
}
1
2
3
1
2
3
2.ID选择器：通过设置id名字，进行精确的选择，用#来定义
# div1 { //通过id名字来进行选择
color:red;
}
<div>1</div>
1
2
3
4
1
2
3
4
3.类选择器:通过类名来进行选择，选择范围比id选择器大，用’.来定义
.div1 { //所有类名为div1的都被选择了
color:red;
}
<div>1</div>
<div>1</div>
<div>1</div>
1
2
3
4
5
6
1
2
3
4
5
6
4.通配符选择器：范围更大，作用于所有标签，用*来定义
不建议使用，对页面加载负担大
高级选择器
1.后代选择器：定义用空格隔开
div span { //选择的是div标签下的span标签，当然后代顾名思义可以不止隔一代，可以隔多代进行选择
color：red；
}
<div><span>1</span></div>
1
2
3
4
1
2
3
4
2.交集选择器：与后代选择器定义的不同是，没有空格隔开，两个元素紧挨着
span#a1 { //选择的是两个条件1.既是span标签的 2.id名是a1的元素，两个条件缺一不可
color：red；
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
3.并集选择器：定义用逗号隔开
span，#a1 { //选择的是1.是span标签的 2.id名是a1的元素，两个条件满足一个即可
color：red；
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
4.伪类选择器：
1.静态伪类：点击连接之前（link），点击连接之后(visited)这样的
2.动态伪类：鼠标移入（hover），点击之后（focus）
@ 前端常用的框架有哪些？
1. Twitter BootStrap （Apache v2.0；响应式）时髦、直观并且强大的前端框架，让Web开发变得更加容易。
2. Foundation （MIT；响应式）最先进的响应式前端框架。
3. 960gs（GPL&MIT；响应式）960gs提供了一个简单的网格系统，适合快速开发。
4. Skeleton（MIT；响应式）非常漂亮的Web模板，适合响应式、移动友好的开发。
5. 99lime HTML KickStart（Free）适合网站快速开发的HTML构建模块。
6. Kube（Free；响应式）面向专业人员的CSS框架。
7. Less Framework（MIT；响应式）自适应的CSS网格系统。
8. Flameinwork（Free）适合懒人开发者的前端微框架。
9. G5 Framework（Free）(x)HTML5、CSS、PHP前端开发框架。
10. Easy Framework（Free）Easy Framework是一个一体化前端解决方案，分structural、 presentational、interactive三层。
11. Blueprint（Free）一个旨在减少开发时间的前端框架。
12. YAML（Creative Commons）(x)HTML+CSS框架，适合开发现代化浮动布局。
13. BlueTrip（Free）一个功能全面、并且美丽的CSS框架，适合于Blueprint搭配使用。
14. YUI3:Grids CSS（BSD）YUI Grids CSS是最著名的CSS框架之一，是由Yahoo开发小组开发而成。 YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。
15. 52framework（Creative Commons）对HTML5支持非常好，简单易用。
16. elastiCSS（MIT）一个基于Web接口和印刷布局的简单CSS框架。
17. Emastic（Free）一个与众不同的CSS框架。
18. Fluid 960 Gride System（GPL/MIT）Fluid 960 Grid System的模版是根据Nathan Smith之前的作品而创建的。即960 Grid System：传承了MooTools和jQuery JavaScript libraries的效果。
19. xCSS（MIT）一个面向对象的CSS框架，能让你的工作流更加简洁。xCSS基于CSS，可以在开发复杂样式时，提供面向对象的工作流。
20. EM CSS Framework（MIT/GPL）EM CSS Framework提供了一个960px宽 + 12 列网格系统 + CSS的通用样式。
