解决方法有很多，如果可以对html改动的话，就给你需要细化的页面元素加多一个class或者ID就行了，当然这种方法应该不是你想要的。那么接下来是不改变HTML的情况下，直接用css的方法来实现你想要的效果——

自从接触网站开发以来到现在已经有六个年头了，今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时，勾起了在这网站开发道路上的一串串回忆，成功与喜悦、烦恼与纠结都历历在目，感慨颇多。在此与大家分享，希望对初学Web前端的各位童鞋来说有所帮助。欢迎各位吐槽、拍砖。

先从大家学习上的一个误区开始谈起。

前端开发是一个近几年兴起的新兴行业，所以远没有电子商务那样成熟的课程体系，大学内也没有完整的前端课程体系，所以学习前端在国内无非就是培训，以及自学。

培训是针对那些有条件的人来说，很多小伙伴更喜欢的是自学。但是一个人自学毕竟力量是有限的，为了让想学习的人可以更好的学习，给大家推荐一个裙，前面是6 1 1，中间是肆 二 8，最后面就是壹 四  二，这里有很多想学习的人和你一起交流，也有大牛每天晚上免费教学，想要学习的人都可以加入我们，但是我们只欢迎想学习的人，不是来学习，随便看看的就不要进了。

Web前端的学习误区　

网页制作是计算机专业同学在大学期间都会接触到的一门课程，而学习网页制作所用的第一个集成开发环境（IDE）想必大多是Dreamweaver，这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便。

入门快、见效快让我们在不知不觉中已经深深爱上了网页制作。此时，很多人会陷入一个误区，那就是既然借助这么帅的IDE，通过鼠标点击菜单就可以快速方便地制作网页。

那么我们为什么还要去学习HTML、CSS、JavaScrpt、jQuery等这些苦逼的代码呢？这不是舍简求繁吗？　

但是随着学习的深入，就会发现我们步入了一种窘境——过分的依赖IDE导致我们不清楚其实现的本质，知其然但不知其所以然。

因此在页面效果出现问题时，我们便手足无措，更不用提如何进行页面优化以及完成一些更高级的应用了。其原因是显而易见的——聪明的IDE成全了我们的惰性，使我们忽略了华丽的网页背后最本质的内容——code。

正确的方向胜过无谓的努力　

有两只蚂蚁想翻越一段墙，寻找墙那头的食物。一只蚂蚁来到墙脚就毫不犹豫地向上爬去，可是每当它爬到大半时，就会由于劳累、疲倦而跌落下来。虽然它不气馁，一次次跌下来，又迅速地调整一下自己，重新开始向上爬去。　

另一只蚂蚁观察了一下，决定绕过墙去。很快，这只蚂蚁绕过墙来到食物前，开始享受起来；而另一只蚂蚁还在不停地跌落下去又重新开始。

很多时候，成功除了勇气、坚持不懈外，更需要方向。也许有了一个好的方向，成功来得比想象的更快。如果在错误的路上奔跑,再怎么努力也是白搭。学习Web前端也是如此，首先应该选择一个正确的学习路线。

Web前端的学习路线结合我的学习经历、近年来辅导学生的经验以及公司中实际项目的需求，在这里将Web前端的学习分为以下几个阶段

第一阶段——HTML的学习。　

超文本标记语言（HyperText Mark-up Language 简称HTML）是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因此，我们必须掌握HTML的基本结构和常用标记及属性。

HTML的学习是一个记忆和理解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质，将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味，想必对各位初学的小盆友们来说必定是极好的！

在学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。

于是进入第二个阶段——CSS的学习。

CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。

同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习，我们就可以顺利完成“一幢楼房”的建设。

“楼房”建设完成之后，我们可以交给用户使用，但是如果想让用户获得更佳的体验，我们还可以对“楼房”进行更深一步的“装修”，让它看起来更“豪华”一些。

为了完成这个任务，我们进入第三个阶段——JavaScript的学习。

JavaScript是一种在客户端广泛使用的脚步语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的特效、验证、交互等，使我们的页面看起来不那么呆板，屌丝瞬间逆袭高富帅！有么有？

此时，也许你还沉浸在JavaScript给你带来的惊喜之中，但你的项目经理却突然对你大吼道:

“这个效果在××浏览器下不兼容，重新搞……”

“不兼容？”瞬间石化了有木有？

“我擦，坑爹啊！那可是花了我一个晚上写了几百行代码搞定的啊，吐血了都!”

JavaScript的兼容性和复杂性有时候的确让我们头疼，还好有“大神”帮我们做了封装。

接下来我们进入第四个阶段——jQUery的学习。

jQuery是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器（jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持），同时现在有很多基于jQuery的插件可供选择，这样在我们实现一些丰富的动态效果时更方便快捷，大大节省了我们开发的时间，提高了开发速度，这也充分体现了其write less,do more的核心宗旨。这个Feel倍儿爽！有么有？

“豪华大楼”至此拔地而起，但是每天这样日复一日，年复一年的盖楼，好繁琐！能不能将大楼里面每一个单独部件模块化，当需要盖楼时就像堆积木一样组合在一起，这样岂不是爽歪歪？可以实现吗？答案是肯定的。

这种思想在Web前端开发中也是适合的，于是乎就出现了各种前端框架，在这里推荐给大家的是Bootstrap。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。一经推出后颇受欢迎，一直是GitHub上的热门开源项目。

在项目开发过程中，我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。站在巨人的肩膀上就是爽！

Web前端的学习建议

最后给大家聊聊在学习Web前端中的一些建议和方法。

在CSS布局时需要注意的一个问题是很多同学缺乏对页面布局进行整体分析，不能够从宏观上对页面中盒子间的嵌套关系进行把握，就急于动手去做，导致页面中各元素间的关系很混乱，容易出现盒子在浮动时错位等情况。建议大家在布局时采用“自顶向下，逐步细化”的思想，先用几个盒子将页面从整体上划分，然后逐步在盒子中继续嵌套盒子。

“君子生非异也，善假于物也”，在学习的过程中还要多浏览一些优秀的网站，善于分析借鉴其设计思路和布局方法，见多方能识广，进而才可以融会贯通，取他人之长为我所用。

同时还要善于使用Firebug这个利器。Firebug一方面可以在我们学习过程中帮助我们调试自己的页面，另一方面我们可以使用Firebug方便地查看、分析别人网站的源代码，“偷”也是一种技能！

随着移动互联网热潮的到来，移动开发越来越受到大家的追捧，响应式布局、微网站等需求量不断增加，也是我们Web前端未来的发展方向之一，学有余力的同学可以多多关注。最后祝愿大家能在Web前端开发道路上走出一片更宽更广的天地！

目前开发Web应用Javascript发挥的作用越来越大，相关的Javascript框架也比较多。但是有一个问题，我们开发过程中，所有的JS代码都添加了注释，如使用JsDoc，代码的可读性比较强，同时这样的代码也便于调试。但是在产品环境中，我们希望这些JS代码是压缩和混淆过的，这主要是让 JS代码加载的更快，这也是Google AJAX Libraries API出现的原因。YUI Compressor 是一款由 Yahoo 公司开发的、功能非常强大的 JS、CSS 代码混淆和压缩工具，采用Java开发，目前很多Javascript Framework都使用YUI Compressor进行代码分发。

二、使用简介：

在命令行下执行 Java 程序，运行 yuicompressor jar 软件包，来完成任务：

//压缩JS

    java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js >packed.js

//压缩CSS

    java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css >packed.css

三、参考官方英文注释：

3.1 How does the YUI Compressor work?

The YUI Compressor is written in Java (requires Java >= 1.4) and relies on Rhino to tokenize the source JavaScript file. It starts by analyzing the source JavaScript file to understand how it is structured. It then prints out the token stream, omitting as many white space characters as possible, and replacing all local symbols by a 1 (or 2, or 3) letter symbol wherever such a substitution is appropriate (in the face of evil features such as eval or with, the YUI Compressor takes a defensive approach by not obfuscating any of the scopes containing the evil statement) The CSS compression algorithm uses a set of finely tuned regular expressions to compress the source CSS file. The YUI Compressor is open-source, so don't hesitate to look at the code to understand exactly how it works.

3.2 Using the YUI Compressor from the command line

java -jar yuicompressor-x.y.z.jar

Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]

Global Options

      -h, --help                Displays this information

      --type <js|css>           Specifies the type of the input file

      --charset <charset>       Read the input file using <charset>

      --line-break <column>     Insert a line break after the specified column number

      -v, --verbose             Display informational messages and warnings

      -o <file>                 Place the output into <file>. Defaults to stdout.

JavaScript Options

      --nomunge                 Minify only, do not obfuscate

      --preserve-semi           Preserve all semicolons

      --disable-optimizations   Disable all micro optimizations

GLOBAL OPTIONS

-h, --help

        Prints help on how to use the YUI Compressor

--line-break

        Some source control tools don't like files containing lines longer than,

        say 8000 characters. The linebreak option is used in that case to split

        long lines after a specific column. It can also be used to make the code

        more readable, easier to debug (especially with the MS Script Debugger)

        Specify 0 to get a line break after each semi-colon in JavaScript, and

        after each rule in CSS.

--type js|css

        The type of compressor (JavaScript or CSS) is chosen based on the

        extension of the input file name (.js or .css) This option is required

        if no input file has been specified. Otherwise, this option is only

        required if the input file extension is neither 'js' nor 'css'.

--charset character-set

        If a supported character set is specified, the YUI Compressor will use it

        to read the input file. Otherwise, it will assume that the platform's

        default character set is being used. The output file is encoded using

        the same character set.  IMPORTANT: if you do not supply this argument

        and the file encoding is not compatible with the system's default

        encoding, the compressor will throw an error.  In particular, if your

        file is encoded in utf-8, you should include this parameter.

-o outfile

        Place output in file outfile. If not specified, the YUI Compressor will

        default to the standard output, which you can redirect to a file.

-v, --verbose

        Display informational messages and warnings.

JAVASCRIPT ONLY OPTIONS

--nomunge

      Minify only. Do not obfuscate local symbols.

--preserve-semi

      Preserve unnecessary semicolons (such as right before a '}') This option

      is useful when compressed code has to be run through JSLint (which is the

      case of YUI for example)

--disable-optimizations

      Disable all the built-in micro optimizations.Note: If no input file is specified, it defaults to stdin.

The following command line (x.y.z represents the version number):

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.jswill minify the file myfile.js and output the file myfile-min.js. For more information on how to use the YUI Compressor, please refer to the documentation included in the archive.

The charset parameter isn't always required, but the compressor may throw an error if the file's encoding is incompatible with the system's default encoding. In particular, if your file is encoded in utf-8, you should supply the parameter.

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8

四、YUI Compressor 压缩 JavaScript 的原理

YUI Compressor 压缩 JavaScript 的内容包括：

1.移除注释

    2.移除额外的空格

    3.细微优化

    4.标识符替换（Identifier Replacement）

YUI Compressor 包括哪些细微优化呢？

• object["property"]，如果属性名是合法的 JavaScript 标识符（注：合法的 JavaScript 标识符——由一个字母开头，其后选择性地加上一个或者多个字母、数字或下划线）且不是保留字，将优化为： object.property

    • {"property":123}，如果属性名是合法的 JavaScript 标识符且不是保留字，将优化为 {property:123} （注：在对象字面量中，如果属性名是一个合法的 JavaScript 标识符且不是保留字，并不强制要求用引号引住属性名）。

    • 'abcd/'efgh'，将优化为 "abcd'efgh"。

    • "abcd" + "efgh"，如果是字符串相连接，将优化成 "abcdefgh"（注：所有在使用 YUI Compressor 的前提下，对于脚本中的字符串连接，使用连接符 “+” 的效率和可维护性最高）。

    对于 JavaScript 最有效的压缩优化，当属标识符替换。

比如：

(function(){function add(num1, num2) {return num1 + num2}})()

进行属标识符替换后：

(function(){function A(C, B) {return C+ B}})()

再移除额外的空格，最终成了：

(function(){function A(C,B){return C+B}})()

YUI Compressor 标识符替换仅替换函数名和变量名，那哪些不能被替代呢？

1.原始值：字符串、布尔值、数字、null 和 undefined。一般来说字符串占的空间最多，而非数字字面量其次（true、false，null，underfinded）。

    2.全局变量：window、document、XMLHttpRequest等等。使用最多的就是 document、window。

    3.属性名，比如：foo.bar。占据的空间仅次于字符串，”.” 操作符无法被代替，且 a.b.c 更加费空间。

    4.关键字。经常被过度使用的关键字有：var、return。最好的优化方法：一个函数仅出现一次 var 和 return 关键字。

    对于原始值、全局变量、属性名的优化处理方式大致相同：任何字面量值、全局变量或者属性名被使用超过 2 次（包括2次），都应该用局部变量存储代替。

但有部分情况下是禁止使用标识符替换的：

1.使用 eval() 函数。解决方法：不使用或者创建一个全局函数封装 eval()。

    2.使用 with 语句。解决方法：方法同上。

    3.JScript 的条件注释。唯一解决的方法：不使用。

    由于 YUI Compressor 是建立在 rhino interpreter 基础上的，所以上述所有的优化都是安全的。

解压缩可以用gulp，或者node.js或者卡拉。

不过最简单的是使用现在的编码器（hbuilder为例）。

1.将被加密（压缩）的css样式拷贝进来。在操作区点击右键

2.点击“整理代码格式”。等待几秒钟

就完成了解压缩的任务。

最后提一点。css解压缩比js的相对容易。因为没有注释的js是无比头痛的。、