HTML选择器

一、标签的本质

         在HTML文档中通过标签，将超文本引入文档。
            html的编写过程：
        1、学习将设计图翻译成标签
        2、学习如何通过css给标签设置样式，最终完成整个页面开发。

（一）标签在html中扮演的角色

         1.div是标签名
        2.style是指标签的属性，用来设置样式
        3."="称为“赋值”
        4.复制号右侧的内容，是属性的值 赋值号左侧是属性的名称
        5.css样式（属性名：属性值）每一对属性名和值用";"隔开

（二）在浏览器中，标签会被渲染

（渲染：浏览器解析并显示html文档的过程）

        1、标签的本质：所有的标签在页面都是一个矩形盒子
        2、盒子（元素）在网页结构中只有两种关系：
            （a）兄弟元素<盒子与盒子平级>             
            （b）父子元素<盒子套盒子>
        3、盒子（元素）在网页中的分布关系：
            （a）盒子从上向下排列
            （b）盒子从左向右排列

二、基本选择器

（一）行间样式：

        1、行间样式：把写在标签开始标签内部style属性中的样式

        2、 缺点：维护性很差

（二）内部样式

        1、内部样式：将写在行间的样式提取出来，写在一对style标签中，并用{}括起来

        2、如何让浏览器知道这个样式是给那个元素的？
            需要我们在{}前加一个“特殊标识”

        3、特殊标识的作用：在样式表中，选中标签，设置样式，把这个“特殊标识称为“选择器”

（三）标签选择器：以标签名称作为选择器选择标签的依据 

         1、写法：
            标签名{
                样式属性名称1：属性值1；
                样式属性名称2：属性值2；
            }
        2、标签选择器的特征：
            （1）能够为具有一群相同特征的标签，同时设置相同的样式；
            （2）相对来讲好维护；

（四）类选择器：在标签内部通过class属性，给标签设置类型名称，作为选择器元素的依据

         1、写法：
            .[class的属性值]{
                样式属性名称1：属性值1；
                样式属性名称2：属性值2；
            }
        2、特点
            （1）相当于给标签起了一个名字
            （2）不同的元素可以有相同的class属性名，因此类型选择器可以给多个标签设置样式
            （3）同一元素可以有多个class属性，在文档中以空格隔开，因此同一元素的样式是多个样式的叠加的结果

（五）ID选择器：给标签设置id属性来获取元素

1、写法
            # [id的属性值]{
                样式属性名称1：属性值1；
                样式属性名称2：属性值2；
            }
            p:语言标准要求，id不重复
        2、特点：
            （1）有且只能有一个、不能重名、不能有多个
            （2）一般情况不适用id选择器设置

ps:其他所有的选择器皆在这三大选择器基础上的一个组合

（七）基本选择器的优先级：标签<class<id

 ps：由于id选择器优先级较高，导致一些交互性的选择器无法生效，因此前端规范要求，在设置元素样式时，只使用class和标签选择器。