CSS语法、选择器、动态伪类、权重

CSS基础：

css：全拼（Cascading Style Sheets） 层叠样式表；也称之为样式表；

作用：css是用来修饰结构（html标签）的；让结构显示的更美观；

以前布局使用的是表格，缺点，修改不够灵活，因为结构和表现是写在一起的，没有分离，导致不好维护，耦合性高；

后来用html+css布局（div+css）

html和css实现了结构表现相分离；耦合性低；

CSS样式表：css必须要写在样式表里；

1、行内样式表（内联样式表）

语法： <标签 style="css语句"></标签>

说明：

         1、在当前的标签上定义一个style属性即可，在style属性值的位置上写css语句；

         2、不推荐使用行内样式，

              -> 会出现代码冗余的情况

              ->没有实现 耦合性高，结构和表现相分离

              -> 行内样式的优先级别高

              -> 在需要的时候使用

        3、特点：

              -> 使用方便

              -> 作用域： 只针对当前标签起作用

如： <div style=" width:100px;height:100px;background:red;"></div>

       css属性:

                    width:;  宽度

                    height:;  高度

                    background:;  背景

2、css样式表-内部样式表（内嵌样式表）：

语法：<style type="text/css">

                css 语句

            </style>

说明：

                1、通过style标签创建内部样式表，是在html文件内创建；

                2、建议把style标签创建在html文件内的head区域内；

                3、type="text/css" 定义文本类型为css;可写可不写；

            特点：

                1、实现了结构和表现相分离，但是分离的还不够彻底，耦合性相对较低

                2、不是特别推荐使用，当页面代码量比较少或者在写案例时使用；

                3、作用域：只针对当前页面起作用；

3、外部样式表：

      外部样式表的创建：新建一个css文件；关联样式表到当前的html文件内：

                <link rel="stylesheet" type="text/css" href="目标文件路径">

     属性：

                    rel="stylesheet"  关联样式表(必须的)

                        -> rel : relation  关系，关联

                        -> stylesheet: 样式表

                    type="text/css" 设置文本类型为css，可写可不写；

                    href="" 设置要使用的css文件的路径；

                说明：

                    建议把link标签写在head区域内；

                特点：

                    1、建议使用

                    2、真正实现了结构和表现相分离，耦合性极低

                    3、作用域：可以对多个页面起作用

 css 三大特性：

            1、优先级：

                -> 行内样式的优先级别最高；

                -> 内部样式表和外部样式表的优先级跟书写顺序有关，谁的位置越靠后，谁的优先级别就越高；根据就近原则显示；

                -> ？选择器也有优先级 ，每一个选择器都有自己的权重大小；

                -> 当优先级一样的时候，后写的会把前面的覆盖；

            2、层叠(覆盖)性：

                -> 当发生冲突的时候，优先级高的就会把优先级低的给层叠（覆盖）掉；

                -> 当没有发生冲突的时候，就都会被显示，也就是说不会被层叠；

            3、继承性：

                -> 给父元素添加的属性，子元素也会应用；

                -> 有的属性具有继承性，有的属性没有继承性；

                    width  height  background border 都没有继承性了；

                    设置文本样式的属性，基本都具有继承性；

关键字过滤器：!important;  

            说明：具有最高优先级，比行内样式表的优先级还要高；

            如：

                .box{

                    background:green !important;

                }

css选择器：    

1、类型选择器（元素选择器、标签选择器）：

                语法：元素名称{属性：属性值；}

                如： body  div  html  p  span...

                特点：会把页面内相同的元素全部找到，用且添加样式；

                使用场景：

                    -> 控制全局样式时；

                    -> 当想统一页面内某一类标签的样式时；

                    -> 当改变某一类标签的默认样式时； a{ color:gray ;}

 2、id选择器

              语法： #id名{ 属性：属性值；}

                如： #one{ 属性：属性值；}

                     <div id="one">1</div>

              说明：具有唯一性，一个元素只能拥有一个唯一的id名字；

              使用场景：一般在写外围结构时会使用id属性；

              注：项目开发中，设置样式时，一般很少用id,一般使用class设置样式；

3、class选择器（类选择器）：

              语法：.class名{属性：属性值；}

                如：

                    <div class="box"></div>

                    .box2{ 属性：属性值；}

                class属性的特点：像我们的名字一样，每个元素可以拥有多个class名字，并且可以和其他元素拥有相同的class名字；

                注：

                    当一个元素拥有多个class名字时，名字和名字之间用空格隔开；（属性值和属性值）

基本选择器（类型选择器、id选择器、class选择器）；

            复合式选择器：只是一种属性的形式，混合使用或者配合使用时；

            复合式选择器：

                并集选择器（群组选择器）：

                后代选择：子选择器  包含选择器 交集选择器...

                伪类选择器

                伪元素选择器

css 选择器-群组选择器（并集选择器）：

            语法：选择器1，选择器2，选择器3，...,选择器n{ 属性：属性值；}

            作用：提取同分类项；

                  把具有相同样式的选择器提取出来，用逗号隔开的形式组成一组，共同添加相同的样式；

css 选择器-包含选择器

                语法：选择器1 选择器2 ... 选择器n{ 属性：属性值；}

                说明：通过父元素找子元素，或者通过祖先级元素找后代元素；

                     包含选择器也叫后代选择器；

                注：包含选择器只能通过父找子，祖先找后代，绝对不能通过子元素找祖先级元素；

css选择器-复合式选择器-交集选择器：

            交集选择器：

                选择器1选择器2...选择器n{ }

                说明：选择器1和选择器2...之间是没有空格的，也就是紧挨在一起的；

                注：选择器1 选择器2 ...  指的都是同一个元素；

                具有增加权重，更加强调的意思；

css选择器-复合式选择器-子选择器：

            语法：选择器1>选择器2{ }

            说明：选择器1一定是选择器2的父元素；

css选择器-复合式选择器-动态伪类选择器：

        语法：

            选择器:link{ }       超链接的初始状态

            选择器:visited{ }    超链接的访问过后状态

            选择器:hover{ }      鼠标滑过状态 (常用的，可以使用在按标签以外的标签上)

            选择器:active{ }     激活状态（鼠标按下去没有松开的瞬间,很少用，可以使用在按标签以外的标签上）

            注：

                1、当一起使用伪类选择器时，要注意书写顺序，按照上面的书写顺序使用，错误的顺序会导致样式显示错误；

                2、直接给a标签设置样式，是包含了以上四个状态的；

                3、如果只有滑过状态不一样，其他三个状态都一样，可以如下设置:

                    a{ color:red; }

                    a:hover{ color:green;}

li:hover  a{color: red} 代表鼠标滑过li标签时，a标签的变化

a作为超链接标签的文字不具有继承性，继承不了滑过li时，li设置的文本颜色

所以设置 li:hover{color: red} li标签里面的a标签文字不会有变化

默认自带的效果，都不具有继承性，需要在自身标签内设置。（a标签默认自带颜色）

a作为文本标签的文本如果之前设置了文本颜色，那么在下面 li:hover 设置颜色时就无法继承li的颜色，而a标签默认带有颜色属性，a的文本不管设不设置都有颜色效果，相当于二次设置了颜色，所以作为文本属性 a 设置的权重比 li 继承的权重大，文字不能改变颜色。所以a标签的文本只能通过自身设置。

a的下划线，作为文本标签，如果在a标签里没有设置样式，那么默认是有下划线的，所以在 li:hover里面 作为文本设置是有效果的，不属于二次设置，不存在改变权重设置问题，但是默认的下划线会一直存在，两个会成为重叠的下划线

css选择器-通配符：

            语法：  *{ 属性：属性值；}

            说明：通配符代表了页面上所有的标签；

            作用：设置全局样式的；

                如：

                    *{

                        /* 外边距 */

                        margin:0;

                        /* 内边距 */

                        padding:0;

                    }

选择器的权重值：0000

            类型选择器    0001

            id选择器      0100

            class选择器   0010

            并集选择器    选择器自身权重大小

            包含选择器    包含选择器的权重之和

            交集选择器    交集选择器权重之和

            子选择器      所有子选择器的权重之和

            伪类选择器    0010

            通配符        0000

            继承属性      0000

            行内样式表    1000

            !important;   具有最高权重

注：当权重相等的时候，根据就近元素显示；

id和class的权重相比较

id=100，class=10

在指向同一个标签时，多少个class的权重和都不能覆盖id，除非计算权重时加上id的权重 

单独来说 id的权重永远大于class