前端三剑客 —— CSS （第二节）
目录
内容回顾：
CSS选择器***
属性选择器
伪类选择器
1）:link 超链接点击之前
2）:visited 超链接点击之后
3）:hover 鼠标悬停在某个标签上时
4）:active 鼠标点击某个标签时，但没有松开
5）:focus 某个标签获取焦点时的状态
部分伪类选择器样例示范：
：checked
：first-child
：last-child
：nth-child(n)
案例：实现表格隔行变色效果。
伪元素选择器
伪元素的运用案例：
常见样式
基本语法
常见样式
编写样式：index.css
编写页面，index.html
内容回顾：
CSS的几种写法：
1.行内样式
2.内嵌样式
3.外链样式
4.@import
CSS选择器***
在CSS中，对于元素的修饰是通过选择器来获取到的，它有很多选择器。
---基本选择器
---包含选择器
---属性选择器
---伪类选择器
CSS选择器***
属性选择器
由于在HTML中标签的属性是很重要的元素，所以CSS中也提供了直接可以通过标签属性的方式来获取元素。属性选择是在使用过程需要使用到中括号（[ ]）
举例示范：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 需求1：获取页面中所有带有 class 属性的元素 */
[class] {
color: blueviolet;
}
/* 需求2：获取带有 class 属性，并且值为 container 的元素 */
.container[class] {
color: white;
background-color: blue;
}
/* 需求3：获取页面中所有 div 且带有 title 属性的元素 */
div[title] {
margin-top: 5px;
margin-bottom: 5px;
border: 1px solid #0000ff;
}
/* 需求4：获取页面中所有 input 元素且有 type 属性的，同时这个属性的值必须是
text 的所有元素 */
input[type="text"] {
color: red;
border: 1px solid blue;
}
/* 需求5：获取所有 input 元素的 type 属性的值中包括字母 e 的所有元素 */
input[type*='e'] {
background-color: aquamarine;
}
/* 需求6：获取type属性的值中以字母 e 开头的所有元素 ^ 这个指的是开头 */
input[type^='e'] {
border: 1px dotted orange;
outline: none;
}
/* 需求7：获取 type 属性的值中以 rl 结尾的所有元素 $ 这个指的是结尾 */
input[type$='rl'] {
color: brown;
}
/* 需求8：通过类样式为 msg 元素来获取它的下一个元素 p + p 获取什么元素就用+ 相应的元素 */
div.msg + p {
border: 1px solid #ff0000;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">这是一个容器</div>
<p>第一个段落</p>
<p>第二个段落</p>
<div title="这是标题">这是第二个容器</div>
<input type="text" name="company" value="西安鸥鹏">
<input type="url" name="url" value="www.xianoupeng.com">
<input type="email" name="email" value="li@xianoupeng.com">
<hr>
<div class="msg">这是个人信息</div>
<p id="msg2">第三个段落</p>
</body>
</html>
属性选择器说明：
1.要使用属性选择器，必须合适中括号
2.可以直接使用属性，也可以使用属性名 = “属性值”的方式
3.还可以使用包含（*）、以什么开头（^）、以什么结尾（$）的方式来获取
4.加号（+）表示某个元素之后紧跟着的第一个元素
伪类选择器
同一个标签，在不同的状态下，它具有不同的样式，这就叫伪类样式。伪类选择器使用冒号（：）来表示。
常见的状态主要有以下几种：
1）:link 超链接点击之前
2）:visited 超链接点击之后
3）:hover 鼠标悬停在某个标签上时
4）:active 鼠标点击某个标签时，但没有松开
5）:focus 某个标签获取焦点时的状态
举例示范：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/* 超链接点击之前的颜色 */
a:link {
color: orange;
}
/* 超链接点击之后的颜色 */
a:visited {
color: brown;
}
/* 鼠标移动到元素上的效果，注意不能移开鼠标 */
a:hover {
text-decoration: none;
}
/* 按住鼠标不松开的效果 */
a:active {
color: red;
}
/* 元素获取焦点的效果 */
input[type]:focus {
border: 1px solid #ff0000;
outline: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="https://www.taobao.com" target="_blank">淘宝</a>
<br>
<input type="text" name="name">
</body>
</html>
页面显示如下：
部分伪类选择器样例示范：
在CSS中伪类选择器有很多
：checked
这个伪类选择器，是用于获取所有选中的元素。
：first-child
选择器匹配属于任意元素的第一个子元素的元素
：last-child
选择所有指定元素的最后一个子元素
：nth-child(n)
选择所有p元素的父元素的第二个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:nth-child</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none; /*去掉小圆点*/
}
ul li {
width: 200px;
height: 25px;
background-color: orange;
margin-top: 2px;
padding-left: 5px;
}
/*
ul li:first-child + li {
color: white;
}*/
/* 奇数行为白色 */
ul li:nth-child(odd) {
color: white;
}
/* 偶数行为兰色 */
ul li:nth-child(even) {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
案例：实现表格隔行变色效果。
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格隔行变色</title>
<style>
table {
width: 500px;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-collapse: collapse;
}
td,th {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
text-align: center;
}
tr:nth-child(odd) {
background-color: #cccccc;
}
tr:first-child {
background-color: grey;
}
</style>
</head>
<body>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
</table>
</body>
</html>
伪元素选择器
在CSS3中出现了伪元素选择器，我们常用的有两个：
--- ::before 它是在元素的内容之前添加前前缀内容
--- ::after 它是在元素的内容之后添加后缀内容
伪元素的运用案例：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器运用</title>
<style>
.container {
width: 300px;
height: 200px;
background-color: #0B133A;
border: 2px solid #243A64;
position: relative;
}
.container img {
height: 200px;
width: 300px;
overflow: hidden;
}
.container::before {
content: '';
width: 10px;
height: 10px;
border-left: 2px solid #317FE5;
border-top: 2px solid #317FE5;
position: absolute;
left: -2px;
top: -2px;
}
.container::after {
content: '';
width: 10px;
height: 10px;
border-top: 2px solid #317FE5;
border-right: 2px solid #317FE5;
position: absolute;
right: -2px;
top: -2px;
}
.footer {
width: 100%;
height: 10px;
position: absolute;
left: 0;
bottom: 0;
}
.footer::before {
content: '';
width: 10px;
height: 10px;
border-left: 2px solid #317FE5;
border-bottom: 2px solid #317FE5;
position: absolute;
left: -2px;
bottom: -2px;
}
.footer::after {
content: '';
width: 10px;
height: 10px;
border-right: 2px solid #317FE5;
border-bottom: 2px solid #317FE5;
position: absolute;
right: -2px;
bottom: -2px;
}
</style>
</head>
<body>
<div class="container">
<img src="image/5.jpeg">
<div class="footer"></div>
</div>
</body>
</html>
常见样式
基本语法
CSS的样式编写的基本语法如下：
注意：每一个属性值后要用分号结束，属性与属性值之间要用英文冒号分割。
常见样式
以下以案例的方式给讲解样式编写。
页面效果
编写样式：index.css
* {
margin: 0; /* 去掉元素的外边距，表示上、右、下、左都为 0 */
/**
有以下几种写法：
margin: 0 5px; 表示上下外边距为0，左右外边距为 5px
margin: 1px 2px 5px; 表示上为 1px，左右为 2px， 下为 5px */
margin: 1px 2px 3px 4px; 表示上为 1px，右为 2px，下为 3px，左为 4px
*/
padding: 0; /* 去掉元素的内边距，即元素内容和元素的边框之间的距离，当只有一个值时表示
上、右、下、左都一样 */
}
a {
*/
font-family: "微软雅黑"; /* 设置字体 */
font-weight: normal; /* 设置文字粗细 */
font-size: 14px; /* 设置文字大小 */
text-decoration: none; /* 去掉链接的下划线 */
/*color: #333333;*/
color: rgb(3, 3, 3);
/*color: rgba(3,3,3, .8);*/
opacity: 0.9; /* 设置透明度，它的值在 0 ~ 1 之间，0 表示完全透明，1表示完全不透明
}
a:hover {
color: #C44F00;
text-decoration: line-through;
}
.container {
width: 900px;
height: 500px;
background-color: #cccccc;
margin: auto; /* 设置容器居中显示 */
编写页面，index.html
}
.top {
width: 100%; /* 设置宽度，值可以是数字，也可以是百分比，如果是百分比，那么它的父组元
素一定要有值 */
height: 60px; /* 定义容器的高度，当值为 0 时可以不带单位，如果值为非 0 ，则必须带单
位 */
/*border: 1px solid red;*/ /* 定义边框样式*/
}
.top .nav {
width: 100%;
height: 100%;
background-color: #eeeeee;
position: relative; /* 相对定位 */
}
/* 定义logo 样式 */
.nav > img {
width: 60px; /* 设置logo图片宽度为 30px */
padding-left: 10px; /* 定义左内边距 */
}
.nav .title-nav {
width: 90%;
height: 100%;
/*background-color: #317FE5;*/
float: right; /* 定义浮动，它的值由 left、center 和 right */
}
ul.nav-first {
height: 100%;
list-style: none; /* 去掉无序列表的默认样式 */
}
ul li {
width: 90px;
height: 100%;
float: left;
text-align: center; /* 定义文字水平居中 */
line-height: 60px; /* 定义内容的行高 */
margin-right: 5px; /* 右外边距为 5px */
}
.content {
width: 100%;
height: 380px;
padding: 10px;
text-indent: 30px; /* 设置起始文字缩进 */
background-color: white;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
background-color: #cccccc;
}
编写页面，index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见样式</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<div class="top">
<div class="nav">
<img src="image/logo.png"/>
<div class="title-nav">
<ul class="nav-first">
<li><a href="#">郑大内网</a></li>
<li><a href="#">郑大内网</a></li>
<li><a href="#">郑大内网</a></li>
<li><a href="#">郑大内网</a></li>
<li><a href="#">郑大内网</a></li>
<li><a href="#">郑大内网</a></li>
<li><a href="#">郑大内网</a></li>
<li><a href="#">郑大内网</a></li>
</ul>
</div>
</div>
</div>
<div class="content">
中新网2月20日电 据香港《明报》报道，澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启，被
视为“城中钻石笋盘”，家底丰厚兼遗传了赌王的帅气。2018年农历新年，他公布向内地女友GiGi求婚成
功，随后传媒追问他有关婚礼的安排却低调避谈。
</div>
<div class="footer">
<div class="msg">刘建宏是个帅哥</div>
<div class="box"></div>
</div>
</div>
</body>
</html>
相关文章：
前端三剑客 —— CSS （第二节）
目录 内容回顾： CSS选择器*** 属性选择器 伪类选择器 1）:link 超链接点击之前 2）:visited 超链接点击之后 3）:hover 鼠标悬停在某个标签上时 4）:active 鼠标点击某个标签时，但没有松开 5）:fo…...
牛客NC31 第一个只出现一次的字符【simple map Java,Go,PHP】
题目 题目链接： https://www.nowcoder.com/practice/1c82e8cf713b4bbeb2a5b31cf5b0417c 核心 Map参考答案Java import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定，请勿修改，直接返回方法规定的值即可*…...
软考系统架构设计师(摘抄)01
架构师承担的责任 系统架构师设计师是承担系统架构设计的核心角色，他不仅是连接用户需求和系统进一步设计与实现的桥梁，也是系统开发早期阶段质量保证的关键角色。系统架构师就是项目的总设计师，他是一个既需要掌控整体又需要洞悉局部瓶颈&a…...
5G无线接入网和接口协议
**部分笔记** 4.3无线协议架构 NR无线协议分为两个平面：用户面和控制面。 用户面（UP）:协议栈及用户数据采用的协议 控制面(Control Plane，CP)协议栈即系统的控制信令传输采用的协议簇。 虚线标注的是信令数据的流向。一个UE在…...
【力扣刷题日记】1173.即时食物配送I
前言 练习sql语句，所有题目来自于力扣（https://leetcode.cn/problemset/database/）的免费数据库练习题。 今日题目： 1173.即时食物配送I 表：Delivery 列名类型delivery_idintcustomer_idintorder_datedatecustomer…...
2024年github之node排行榜top50
如果有帮助到您还请动动手帮忙点赞，关注，评论转发，感谢啦！💕💕💕😘😘😘 本文由Butterfly一键发布工具发布 2024年github之node排行榜top50 语言star项目名称…...
当我们在地址栏输入URL的时候浏览器发生了什么
URL 解析 是否合法 首先判断你输入的是一个合法的 URL 还是一个待搜索的关键词，并且根据你输入的内容进行自动完成、字符编码等操作。检查http缓存 DNS 查询 浏览器缓存 -> 操作系统缓存 -> 路由器缓存 -> DNS缓存 -> 根域名服务器查询 TCP 连接 …...
【研发日记】Matlab/Simulink开箱报告(十一)——Requirements Toolbox
目录 前言 Requirements Toolbox 编写需求 需求联接设计 需求跟踪开发进度 追溯性矩阵 分析和应用 总结 前言 见《开箱报告，Simulink Toolbox库模块使用指南（六）——S-Fuction模块（TLC）》 见《开箱报告&#x…...
Elastic 8.13：Elastic AI 助手中 Amazon Bedrock 的正式发布 (GA) 用于可观测性
作者：来自 Elastic Brian Bergholm 今天，我们很高兴地宣布 Elastic 8.13 的正式发布。 有什么新特性？ 8.13 版本的三个最重要的组件包括 Elastic AI 助手中 Amazon Bedrock 支持的正式发布 (general availability - GA)，新的向量…...
MFC 截取对话框生成图片、截取整个屏幕（可取黑白反色或者整体图片取反色）
HWND hwnd ::GetDesktopWindow();//截整个屏幕，用从这往下4句HDC hdc ::GetDC(hwnd);CDC dc;dc.Attach(hdc);CRect rc,rcw;GetWindowRect(&rcw);GetClientRect(&rc);//只截对话框，用这句//rc.SetRect(0, 0, GetSystemMetrics(SM_CXSCREEN), Ge…...
【LeetCode: 331. 验证二叉树的前序序列化 + DFS】
🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持，因为它具有很高的价值，算法就是这样✨ 🌲 作者简介：硕风和炜，…...
【Consul】Linux安装Consul保姆级教程
【Consul】Linux安装Consul保姆级教程 大家好 我是寸铁👊 总结了一篇【Consul】Linux安装Consul保姆级教程✨ 喜欢的小伙伴可以点点关注 💝 前言 今天要把编写的go程序放到linux上进行测试Consul服务注册与发现，那怎么样才能实现这一过程&am…...
pytorch常用的模块函数汇总（1）
目录 torch：核心库，包含张量操作、数学函数等基本功能 torch.nn：神经网络模块，包括各种层、损失函数和优化器等 torch.optim：优化算法模块，提供了各种优化器，如随机梯度下降 (SGD)、Adam、RMS…...
素数的计数律：Π函数、歪斜数
相当多的数字！ 一、说明 自从人类开始掌握最起码的算术概念以来，有一类数字一直处于最前沿——素数。素数定义简单，但难以捕捉，众所周知，素数是数学中一些最困难问题的罪魁祸首，让几代最优秀的数学家感到…...
图像识别在农业领域的应用
图像识别技术在农业领域的应用正在逐渐成熟，它通过分析处理拍摄的植物或农田的图像，为农业生产提供决策支持。以下是图像识别在农业中的一些关键应用： 病虫害检测：图像识别技术能够识别作物上的病斑、虫害或异常状况。通过比较高…...
【JavaSE】java刷题--数组练习
前言 本篇讲解了一些数组相关题目（主要以代码的形式呈现），主要目的在于巩固数组相关知识。 上一篇 数组 讲解了一维数组和二维数组的基础知识~ 欢迎关注个人主页：逸狼 创造不易，可以点点赞吗~ 如有错误，欢迎…...
预处理、编译、汇编、链接过程
预处理、编译、汇编、链接过程 预处理 引入头文件 #include 展开宏定义 #define 处理条件编译指令 #ifdef 删除注释 添加行号 在Linux下可以使用gcc -E命令把hello.c文件预处理成hello.i文件。windows这些操作都集成在编译器visual studio这些里面了。 编译 进行语法分…...
3、Cocos Creator 节点和组件
目录 1、 节点和组件 2、 节点层级和显示顺序 3、坐标系和节点变换属性 坐标系 锚点 旋转 缩放 尺寸 4、 常用技巧 5、参考 1、 节点和组件 Cocos Creator 的工作流程是以组件式开发为核心的，组件式架构也称作 组件 — 实体系统（或 Entity-C…...
【js刷题：数据结构数组篇之长度最小的子数组】
长度最小的子数组 一、题目二、方法1.暴力解法2.滑动窗口是什么滑动窗口的起始位置滑动窗口的结束位置代码展示 3.力扣刷题水果成篮题目思路代码 一、题目 给定一个含有 n 个正整数的数组和一个正整数 s ，找出该数组中满足其和 ≥ s 的长度最小的 连续 子数组&…...
大话设计模式之装饰模式
装饰模式（Decorator Pattern）是一种结构型设计模式，它允许向现有对象动态地添加新功能，同时又不改变其结构。装饰模式通过将对象放入包装器中来实现，在包装器中可以动态地添加功能。 在装饰模式中，通常会有…...
国赛大纲解读
1. 第一部分，是针对5G基础知识的掌握，第二部分是人工智能基本算法的掌握，就是人工智能的应用，用5G+人工智能（AI算法）进行网络优化的问题，要有网络优化的基础知识，比如说：某个区域的覆盖问题，覆盖特别差，但有数据，覆盖电频，srp值这些数据给你，根据数据来判断是…...
设计模式(5)：原型模式
一.原型模式 通过 n e w 产生一个对象需要非常繁琐的数据准备或访问权限，则可以使用原型模式。 \color{red}{通过new产生一个对象需要非常繁琐的数据准备或访问权限，则可以使用原型模式。} 通过new产生一个对象需要非常繁琐的数据准备或访问权限…...
【React】vite + react 项目，进行配置 eslint
安装与配置 eslint 1 安装 eslint babel/eslint-parser2 初始化配置 eslint3 安装 vite-plugin-eslint4 配置 vite.config.js 文件5 修改 eslint 默认配置 1 安装 eslint babel/eslint-parser npm i -D eslint babel/eslint-parser2 初始化配置 eslint npx eslint --init相关…...
Windows入侵排查
目录 0x00 前言 0x01 入侵排查思路 1.1 检查系统账号安全 1.2 检查异常端口、进程 1.3 检查启动项、计划任务、服务 0x00 前言 当企业发生黑客入侵、系统崩溃或其它影响业务正常运行的安全事件时，急需第一时间进行处理，使企业的网络信息系统在最短时…...
C语言每日一题
1.题目 二.分析 本题有两点需要注意的： do-while循环 ：在判断while条件前先执行一次do循环static变量 ：程序再次调用时static变量的值不会重新初始化，而是在上一次退出时的基础上继续执行。for( i 1; i < 3; i )将调用两次…...
TheMoon 恶意软件短时间感染 6,000 台华硕路由器以获取代理服务
文章目录 针对华硕路由器Faceless代理服务预防措施 一种名为"TheMoon"的新变种恶意软件僵尸网络已经被发现正在侵入全球88个国家数千台过时的小型办公室与家庭办公室(SOHO)路由器以及物联网设备。 "TheMoon"与“Faceless”代理服务有关联，该服务…...
人脸68关键点与K210疲劳检测
目录 人脸68关键点检测 检测闭眼睁眼 双眼关键点检测 计算眼睛的闭合程度： 原理: 设置阈值进行判断 实时监测和更新 拓展：通过判断上下眼皮重合程度去判断是否闭眼 检测嘴巴是否闭合 提取嘴唇上下轮廓的关键点 计算嘴唇上下轮廓关键点之间的距…...
【跟着GPT4学JAVA】异常篇
JAVA异常中的知识点 问： 介绍下JAVA中的异常有哪些知识点吧 答： Java中的异常处理是一个重要的知识点，主要包括以下内容: 异常体系：Java的异常类是Throwable类派生出来的，Throwable下有两个重要的子类：Err…...
Ubuntu上安装d4rl数据集
Ubuntu上安装d4rl数据集 D4RL的官方 github: https://github.com/Farama-Foundation/D4RL 一、安装Mujoco 1.1 官网下载mujoco210文件 如果装过可以跳过这步 链接：https://github.com/deepmind/mujoco/releases/tag/2.1.0 下载第一个文件即可。我这里是在windo…...
C++之STL整理（4）之set 用法（创建、赋值、增删查改）详解
C之STL整理（4）之set 用法（创建、赋值、增删查改）详解 注：整理一些突然学到的C知识，随时mark一下 例如：忘记的关键字用法，新关键字，新数据结构 C 的map用法整理 C之STL整理…...
网页设计师培训排行榜/seo站长工具查询
作者 彭东林pengdonglin137163.com平台 Linux-4.10.17Qemu2.8 vexpress-a9概述 在系统开机probe驱动的时候，有些设备驱动加载可能需要比较长的时间，尤其是像i2c这样的设备，总线速率较低，如果在probe时读写大量的寄存器的话&#…...
非法集资罪提供网站建设/线上推广方式都有哪些
数据结构和算法到底有什么用？ 数据结构是对在计算机内存中（有时在磁盘中）的数据的一种安排。数据结构包括数组、链表、栈、二叉树、哈希表等等。算法对这些结构中的数据进行各种处理。例如，查找一条特殊的数据项或对数据进行排序…...
广东两学一做考试网站/视频运营管理平台
JS中的数据类型 虽然JS是弱类型语言，JS的变量声明的时候并不需要指定数据类型，但是在赋值上每一个数据是由类型的。 值得注意的是ES6之后，又基于以下的6中类型之外添加了一种新的类型：symbol 学习数据类型我们还常用typeof运算符…...
企业官方网站建设规划/自媒体账号申请
不知道哦是不是不小心点了哪里，pycharm开始不停闪烁并且显示updating indices, 暂停服务重启电脑都不起作用，用以下操作就成功解决了问题。 File-> 选中Invalidate Caches/Restart ->Invalidate Caches/Restart 好像是因为项目中有大量的文件&…...
去哪里找做网站的/百姓网
在网页开发中经常会碰到获取同种类型的 标签 的值得问题,比如下面的两种情况. 当需要批量获取同种标签的指定值时,新人就会碰上一点小麻烦. 比如 idproblem1的demo var list1$("#problem1").children();//获取到problem1指定的对象数组 console.log(list1);//打印到…...
张浦专业做网站/西安百度推广代运营
http://www.infoq.com/cn/articles/HIgh-Performance-Parsers-in-Java-V2?utm_sourceinfoq&utm_mediumpopular_links_homepage...