界面中的
“
超文本
“
本质上就是通过一个一个矩形盒子包起来，然后进行排版组合，那么接下来要详细研究这个标签盒子的细节结构，以帮助学习如何使用它，但是在开始研究它之前，我们先来讲解一个概念，选择器的概念。
<div style = "width:100px;height:100px;backgorund-color:red" ></div>
基本选择器
标签选择器
以标签名称作为选择器选中标签
“
标签名
:{
样式
}”
<style>/* h1 实际上就是标签名称，这个选择器就是标签选择器 */h1 {color : red ; /* 设置文本颜色为红色 */font-fize : 14px ; 设置字体大小font-family : 'Courier New' , Courier , monspace ; 设置显示所使用的字体font-weight : bold ; 加粗显示}</style>
标签选择器特点
:
能够为一群具有相同名称的标签，同时设置相同的样式
Id
选择器，一般在一个页面中
id
值不允许重复
id
选择器是通过给标签设置
id
属性，在样式表中通过
#id{
样式
}
对标签设置样式，相当于一个人的身份证号
<style>/* #bb 对应的是标签上的 id 属性值，按照 id 查找对应的标签，这个选择器就是 id 选择器 */#bb {color : red ;}#box1 {width : 100px ;height : 100px ;background-color : red ;}</style><h1 id = "bb" > 主要标题 </h1><div id = "box1" ></div>
d选择器特点 :
有且只能有一个，不能重名，不能有多个
一般不使用
id
选择器设置样式
ps
：其他选择器都将是三大基本选择器的一个组合
class
类型选择器，可以选择一组标签，这组标签可以是不同类型的标签，例如
p h1
等。在标签内部通过class属性，给标签设置类型名在样式表中通过
.
类型名
{
样式
}
的方式给标签盒子设置样式
<style>/* .bb 对应的是不同标签上的 class 属性值，按照 class 属性值查找一组对应的标签，这个选择器就是class 选择器 */.bb {color : red ;}.box {width : 100px ;height : 100px ;background-color : red ;}.box1 {background-color : blue ;}</style><h1 class = "bb" > 主要标题 </h1><div class = "box" ></div><div class = "box" ></div><div class = "box box1" ></div>
类型
class
选择器特点：
相当于给标签起了一个别名
不同盒子可以有相同的
class
属性名，因此类型选择器可以给多个标签同时设置相同样式
同一盒子可以有多个
class
属性名，在文档中以空格隔开，因此同一个盒子的样式是多个选择器叠加的结果
*
通用选择器，选择当前页面中的所有标签
<p> 段落 </p><b> 加粗 </b><span> 无 </span><style>/* 这里的 * 表示当前页面中的任何标签 */* {border : 1px solid red ;}</style>
通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用
伪类选择器：前面是标签选择器，后面类选择器
div.dd{}
典型的伪类选择器，例如链接标签的使用
a:link
链接的颜色
a:visited
已访问的链接颜色
a:hover
鼠标经过时的颜色
a:active
当访问时的颜色
注：已上顺序不可打乱
ID
选择器和类选择器
ID
选择器不可以重名，类选择器可以
ID
选择器在样式表里必须以
#
开头，类选择器在样式表里以
.
开头
选择器优先级
选择器优先级问题，是指当多个选择器选中一个标签，设置相同的样式时谁优先生效的问题
举个例：一般我们的家庭中，男人往往处于相较低的地位，这样一个家庭才能稳固，因此当家里出现这样一个场景
老婆：老公今晚吃米饭吧
孩子：爸爸今晚吃肯德基吧
旺财：主人今晚吃骨头吧
此时，三个家庭成员都选中了这个男人，干同样的事情，但提出不同的需求，此时这个男人的心中就自然而然做出了排序，就有了谁在他心中更优先的问题
我们的选择器，具有相同的特点，例如看如下代码
<!DOCTYPE html><html lang = "zh_CN" ><head><meta charset = "UTF-8" ><meta name = "viewport" content = "width=device-width, initial-scale=1.0" ><meta http-equiv = "X-UA-Compatible" content = "ie=edge" ><title> 选择器优先级问题 </title><style>#box1 {background : red ;}.box {background : blue ;}div {width : 100px ;height : 100px ;background : green ;}/*三大基本选择器标签、 class 、 id 都是通过特殊字符在样式表中选中标签，设置样式在优先级上标签 < class < id优先级高的样式会覆盖优先级低的样式；如果优先级一致，由于样式表是从上到下执行，因此，样式表中后面选择器中的样式会叠加前面选择器中的样式由于 ID 选择器优先级最高，导致一些交互性的选择器无法生效，因此前端规范要求，在设置标签样式时，只使用class 和标签选择器， id 选择器不用来设置样式，一般用在 js 中。选择器优先级判断依据：选择越准确，优先级越高*/</style></head><body><div style = "background-color: saddlebrown" class = "box" id = "box1" ></div></body></html>
属性选择器
属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。
基础语法：
[href] { 选中有 href 属性的方法，注意不一定只有 a 标签有 href 属性，可以给任何标签上添加 href 属性，只是不会进行跳转color: orange;}
复合选择器
将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。
交集选择器
交集复合选择器由两个选择器直接连接构成，其结果是选中二者各自的元素的交集。其中第一个一般是标记选择器，第二个可以是类别选择器或者ID
选择器。这两个选择器之间不能有空格，必须连续书写
这种方式构成的选择器将选中同时满足前后两者定义的元素，也就是说前者所定义的标记类型，并且指定了后者的类别或者ID
的元素，因此叫做交集选择器
<style type = "text/css" >p { color : red ; }p .one { color : green ; }.one { color : pink ; }</style><p> 这是一个段落显示红色 </p><h1> 这是一个标题 </h1><p class = "one" > 这是标记选择器和类别选择器交叉显示绿色 </p><h1 class = "one" > 这个是类别选择器显示粉色 </h1>
分组选择器
分组选择器也叫做并集选择器，结果是同时选中各个基本选择器所选择的范围之和
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> 这是 h1 标记 </h1><h2 class = "one" > 这是 h2 标记 </h2><p> 这是 p 标记 </p><p class = "one" > 这是 p 标记 2 </p><p id = "two" > 这是 p 标记 3 </p>
后代选择器
p b { color: red
;
}
解释：选择元素内部所有元素。不在乎的层次深度。当然，后代选择器也可以混合使用
ID
选择器、类选择器、属性选择器
<style type = "text/css" >p span { color : red ; }span { color : blue ; }</style><p> 这是最外层， <span> 这是最内层 </span></p><span> 这是嵌套外的 span 标记 </span>
子选择器
ul > li { border: 1px solid red
;
}
ul > li {border: 1px solid red;}<ul><li> 我是儿子<ol><li> 我是孙子 </li><li> 我是孙子 </li></ol></li><li> 我是儿子 </li><li> 我是儿子 </li></ul>
子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可
以再往下选择
相邻兄弟选择器
p + b { color: red
;
}
相邻兄弟选择器匹配和第一个元素相邻的第二个元素。
<style>p + b {color : red ;}</style><b> 开始 </b><p> 这是一段简单的显示测试， <b> 儿子标签 </b> 不会有显示效果， <a href = "" ><b> 孙子标签 </b></a> 不会有显示效果 </p><b> 终止 </b>
如果在 【<b>终止</b>】 之前添加任何标签，则不能查找到
普通兄弟选择器
p ~ b { color: red
;
}
<style>p ~ b {color : red ;}</style><b> 开始 </b><p> 这是一段简单的显示测试， <b> 儿子标签 </b> 不会有显示效果， <a href = "" ><b> 孙子标签 </b></a> 不会有显示效果 </p><b> 终止 1 </b> 显示效果<b> 终止 2 </b> 显示效果
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
