界面中的“超文本“本质上就是通过一个一个矩形盒子包起来，然后进行排版组合，那么接下来要详细研究这个标签盒子的细节结构，以帮助学习如何使用它，但是在开始研究它之前，我们先来了解一个概念，选择器的概念。

把写在标签开始标签内部style属性中的样式，称为一个标签的行间样式。 使用行间样式编写代码，维护性很差，试想一个场景，文档中一行上面的代码，可以在页面中生成一个 矩形盒子，如果需要生成1000个，该怎么办？答案是把代码复制1000次，有人说这并不麻烦，但如果现 在客户需求改了，要求所有但盒子宽度都改成200px像素，那么你还觉得简单吗？

显示内容

基本选择器

标签选择器 以标签名称作为选择器选中标签 “标签名:{样式}”

标签选择器特点 : 能够为一群具有相同名称的标签，同时设置相同的样式 Id选择器，一般在一个页面中id值不允许重复 id选择器是通过给标签设置id属性，在样式表中通过 #id{样式} 对标签设置样式，相当于一个人的身份证号

主要标题

id选择器特点 :

• 有且只能有一个，不能重名，不能有多个
• 一般不使用id选择器设置样式

ps：其他选择器都将是三大基本选择器的一个组合 class类型选择器，可以选择一组标签，这组标签可以是不同类型的标签，例如p h1等。在标签内部通过 class属性，给标签设置类型名在样式表中通过 .类型名{样式} 的方式给标签盒子设置样式

主要标题

类型class选择器特点：

• 相当于给标签起了一个别名
• 不同盒子可以有相同的class属性名，因此类型选择器可以给多个标签同时设置相同样式
• 同一盒子可以有多个class属性名，在文档中以空格隔开，因此同一个盒子的样式是多个选择器叠加的结果

* 通用选择器，选择当前页面中的所有标签

段落
加粗
无

通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用 伪类选择器：前面是标签选择器，后面类选择器 div.dd{} 典型的伪类选择器，例如链接标签的使用

• a:link 链接的颜色
• a:visited 已访问的链接颜色
• a:hover 鼠标经过时的颜色
• a:active 当访问时的颜色

注：已上顺序不可打乱  

ID选择器和类选择器

• ID选择器不可以重名，类选择器可以
• ID选择器在样式表里必须以 # 开头，类选择器在样式表里以 . 开头

选择器优先级

选择器优先级问题，是指当多个选择器选中一个标签，设置相同的样式时谁优先生效的问题 举个例：一般我们的家庭中，男人往往处于相较低的地位，这样一个家庭才能稳固，因此当家里出现这样一个场景

• 老婆：老公今晚吃米饭吧
• 孩子：爸爸今晚吃肯德基吧
• 旺财：主人今晚吃骨头吧

此时，三个家庭成员都选中了这个男人，干同样的事情，但提出不同的需求，此时这个男人的心中就自然而然做出了排序，就有了谁在他心中更优先的问题 我们的选择器，具有相同的特点，例如看如下代码

属性选择器

属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。 基础语法：

[href] { 选中有href属性的方法，注意不一定只有a标签有href属性，可以给任何标签上添加href属 性，只是不会进行跳转 color: orange; }

基础样式： 

[href] { color: orange; } [href^="http"] { color: orange; } 解释：属性值开头匹配的属性选择器。例如http://www.baidu.com //所需版本 CSS3 [href$=".com"] { color: orange; } 解释：属性值结尾匹配的属性选择器。 //所需版本 CSS3 [href*="baidu"] { color: orange; } 解释：属性值包含指定字符的属性选择器。 //所需版本 CSS2 [class~="edf"] { font-size: 50px; } 解释：属性值具有多个值时，匹配其中一个值的属性选择器。 //所需版本 CSS2 [lang|="en"] { color: red; } 解释：属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。比如 HTML5。

复合选择器

将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。

交集选择器

交集复合选择器由两个选择器直接连接构成，其结果是选中二者各自的元素的交集。其中第一个一般是标记选择器，第二个可以是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写 这种方式构成的选择器将选中同时满足前后两者定义的元素，也就是说前者所定义的标记类型，并且指定了后者的类别或者ID的元素，因此叫做交集选择器

这是一个段落显示红色
这是一个标题
这是标记选择器和类别选择器交叉显示绿色
这个是类别选择器显示粉色

分组选择器

分组选择器也叫做并集选择器，结果是同时选中各个基本选择器所选择的范围之和 p,b,i,span { color: red;} 解释：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID 选择器、类选择器、属性选择器混合使用

h1,h2,h3,h4,h5,h6,p{
color:red;
font-size:20px;
}
h2.one,.one,#two{
text-decoration:underline;
}
这是h1标记
这是h2标记
这是p标记
这是p标记2
这是p标记3

后代选择器

p b { color: red;} 解释：选择元素内部所有元素。不在乎的层次深度。当然，后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器

这是最外层，这是最内层
这是嵌套外的span标记

子选择器 ul > li { border: 1px solid red;} 解释：子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择

ul > li {
border: 1px solid red;
}

我是儿子

我是孙子
我是孙子


我是儿子
我是儿子

相邻兄弟选择器

p + b { color: red;} 解释：相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

开始
这是一段简单的显示测试，儿子标签不会有显示效果，孙子标签
不会有显示效果
终止

如果在 【终止】 之前添加任何标签，则不能查找到

普通兄弟选择器

p ~ b { color: red;} 解释：普通兄弟选择器匹配和第一个元素后面的所有元素。

开始
这是一段简单的显示测试，儿子标签不会有显示效果，孙子标签
不会有显示效果
终止1显示效果
终止2显示效果

显示样式

1、覆盖元素的默认显示效果
这是一个h1元素
这是一个h2元素
这是一个h3元素
这是一个h4元素
这是一个h5元素
这是一个h6元素
2、强大的显示效果
福

CSS继承

css继承指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记

注意：css层叠不能和继承混淆，可以简单的理解为冲突的解决方案

p { color:green; } 标记选择器
.red{ color:red; } class类别选择器，其中优先级是：行内样式 > id选择器 > class类别选择器 > 标记选择器
#line3{ color:yellow; }
.blue{ color:blue; }
这是第1行
显示绿色，是p选择器的效果
这是第2行
 显示红色，是class=red生效
这是第3行
 显示黄色，是id=line3生效
这是第4行
 显色分红，是style生效，行内式优先级高于内嵌式优先级
这是第5行
显示蓝色，是class=blue生效，连个class级别相同，区别在于声明顺序，在