前端初步预习

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端初步预习相关的知识,希望对你有一定的参考价值。

今天讲的是选择器,有标签选择器,类选择器,id选择器,通配符(id,class命名规范:不能用数字和短横开头,用有意义的英文命名)

标签选择器,特点是以标签名为选择器名,根据标签名找到元素,可以控制页面上所有同样的元素。

  • (class)类选择器:重用性比较高

  格式:.+元素class名{

                      属性:值;
                      }


  • id选择器:只能用一次

  格式:#+元素id名{

                      属性:值;
                      }

  • *通配符:会选择页面上所有的标签导致执行的效率下降,工作中少用甚至不用。

   格式:*{
             属性:值;
             }

  1. 复合选择器

 

  • 后代选择器:只作用在最后一个选择器上(建议用2-3个)

结构 : 选择器1 空格  选择器2  空格  选择器3{

                                              属性:值;
                                            }

  • 子代选择器:当前标签的直接子元素(建议用2-3个)

结构 : 选择器1>选择器2{

                         属性:值;
                        }


  • 交集选择器:同时满足多个选择器的元素的要求才能有效

结构 : 选择器1 选择器2 {

                          属性:值;
                         }


  • 并集选择器:只要满足任意一个条件就能被影响

结构 : 选择器1 ,选择器2 ,选择器3{

                                     属性:值;
                                   }


  • 伪类


1.a:link 链接

2.a:visited  访问后

3.a:hover  鼠标经过

4.a:active  点击时


1和2 只能用于a标签
3和4 可用于其标签


  • 块级元素

例如:p ,h1-h6 ,div ,ul , li ......
特点:默认占一整行,可以设置高宽,默认和父元素一致


  • 行内块级元素

例如:img ,input
属性:display:inline-block;
特点:可以设置宽高,一行可以显示多个


  • 行内元素

例如:a ,spaan ,b , em ......
属性:display:inline;
特点:一行里面可以显示多个,无法设置宽高,大小由内容决定

以上是关于前端初步预习的主要内容,如果未能解决你的问题,请参考以下文章

前端初步预习

前端初步预习------盒子模型之border

Linux 系统初步--虚拟机安装

关于博客的初步理解

前端构建的初步尝试

JavaScript设计前端模板初步理解