欢迎光临散文网 会员登陆 & 注册

千锋前端浠浠呀老师HTML+CSS教程,零基础web前端开发入门必看视频

2023-07-12 16:03 作者:lsh丶鸿  | 我要投稿


           语法:选择器{属性:属性值;属性:属性值;}

            选择器:

                概念:查找到页面元素的一种方法(给谁添加样式谁就是选择器)

                分类:

                    1、标签选择器:标签的名字就是选择器

                        语法:div{}

                        特点:能够匹配到页面中同一类型标签,无论嵌套层级有多深,匹配范围较广

                    2、class选择器(类选择器)

                        语法:

                            HTML:

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

                            CSS:

                                .box{样式}

                        特点:

                            1、class名可以重复使用(不同标签可以使用相同类名)

                            2、一个标签可以有多个类名,类名之间用空格隔开

                    3、id选择器

                        语法:

                            HTML:

                                <div id="content"></div>

                            CSS:

                                #content{样式}

                        特点:

                            id选择器具有唯一性(id名不能重复使用,id名不能有多个)

                    4、通配符选择器

                        语法:*

                            表示匹配到页面中所有元素

                        通常用:

                            *{

                                margin:0;//取消掉外边距

                                padding:0;//取消掉内边距

                            }

                选择器的权重:

                    标签选择器      class选择器            class选择器

                    class选择器    id选择器               id选择器

                    标签选择器      id选择器               id选择器

                    选择器的权重值:

                        通配符:0              (0000)

                        标签选择器:1          (0001)

                        class选择器:10       (0010)

                        id选择器:100         (0100)

                        行内样式:1000        (1000)

                        !important:无穷大

                    使用不同选择器修饰同一标签,相同属性被覆盖(选择器权重大的属性生效),不同属性保留

                关系选择器(层级选择器)

                    1、后代关系选择器

                        符号:空格

                    2、父子关系选择器

                        符号:>

                    注意:关系选择器中,选择器的权重是可以进行相加的

                    选择器权重相同,后面的代码会覆盖前面的代码

                    注意:文本属性具有继承性

                超链接动态伪类选择器(按照以下顺序来书写)

                    :link ------------- 访问前

                    :visited ------------- 访问后

                    :hover ------------- 鼠标滑过(常用,可以应用在任意一个标签上)

                    :active ------------- 鼠标激活瞬间

                群组选择器:

                    语法:选择器1,选择器2,选择器3{样式}

                    注意:群组选择器权重各算各的,互不干扰

千锋前端浠浠呀老师HTML+CSS教程,零基础web前端开发入门必看视频的评论 (共 条)

分享到微博请遵守国家法律