题目点评

这个问题看来很简单,但如果之前没有琢磨这个问题,给人感觉也是门头一垂,听到这个题目就懵逼了,因为原来从来没有注意过这个问题,即便有注意这个问题也不能很好的回答清楚。回答的技巧就是从相同点和不同点,以及他们的作用,及注意事项上去回答。

解答要点

  •  相同点
    1. 都可以用来表示伪类对象,用来设置对象前的内容
    2. :befor和::before写法是等效的
  •  不同点
    1. :befor是Css2的写法,::before是Css3的写法
    2. :before的兼容性要比::before好 ,不过在H5开发中建议使用::before比较好

加分项

  1. 伪类对象要配合content属性一起使用
  2. 伪类对象不会出现在DOM中,所以不能通过js来操作,仅仅是在 CSS 渲染层加入
  3. 伪类对象的特效通常要使用:hover伪类样式来激活
    1. .test:hover::before { /* 这时animation和transition才生效 */ }
--------------------------------------------------------------------------------------------------------------------
 

Web前端面试指导(十二):::before 和:before有什么区别?的更多相关文章

  1. Web前端面试指导(十):元素定位有哪些?

    本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以 ...

  2. Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?

    题目点评 这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要 ...

  3. Web前端面试指导(十九):CSS样式-如何清除元素浮动?

    题目点评 本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的. 答题 ...

  4. Web前端面试指导(十六):为什么要初始化CSS样式?

    题目点评 这个题目乍一看感觉怪怪的,什么叫初始化样式了?如果换一句话你可能就理解了,就是通用样式.这道题目主要涉及的是理论方面的知识,不用写代码,只要描述清楚就可以了 初始化样式的原因 因为浏览器的兼 ...

  5. Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?

    题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 答题要点 1.采用的是均分原理 盒子都是一个 ...

  6. Web前端面试指导(十五):CSS样式-display有哪些作用?

    题目点评 其实就是要你说清楚该属性有哪些值,每个值都有什么作用,这个题目可以答得很简单,但要答全也并非是一件容易的事情. 元素默认的display值的情况如下(这个一般很少人注意这一点) block( ...

  7. Web前端面试指导(二十):JavaScript中如何翻转一个字符串?

    题目点评 字符串作在程序中是非常常见的,因为程序中绝大部分的数据都可以当作字符串来处理.需要对字符的处理方法比较熟悉,在回答的时候尽量能够说出多种解决方法更好! 字符串翻转的方法 1)使用字符串函数 ...

  8. Web前端面试指导(九):盒子模型你是怎么理解的?

    问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的. 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒子模型包 ...

  9. Web前端面试指导(八):iframe有那些缺点

    本题的特点 这道题目的特点就是不按照正常的套路来提问,一般都是问优点,这里比较反常问iframe的缺点,很多同学肯定很不习惯这种问答,因为平时只关注有点,这么一问就懵逼了! 本题解答的思路及要点 ① ...

随机推荐

  1. 洛谷 P2677 超级书架 2 题解

    传送门 题目描述 Farmer John最近为奶牛们的图书馆添置了一个巨大的书架,尽管它是如此的大,但它还是几乎瞬间就被各种各样的书塞满了.现在,只有书架的顶上还留有一点空间. 所有N(1 <= ...

  2. 一款给力的一键复制js插件-clipboard.js

    一款没有依赖的.给力的一键复制的JS插件   点我前往github 案例demo见下载包内demo文件夹. 这里晒出最常用的几种方式,以供不时之需. <!DOCTYPE html> < ...

  3. [HAOI2007]理想的正方形 BZOJ1047 二维RMQ

    题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一行为3个整数,分别表示a,b,n的值 第二行至 ...

  4. AngularJS 1.x系列:AngularJS服务-Service

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  5. 洛谷 P3182 [HAOI2016]放棋子(错排问题)

    题面 luogu 题解 裸的错排问题 错排问题 百度百科:\(n\)个有序的元素应有\(n!\)个不同的排列,如若一个排列使得所有的元素不在原来的位置上,则称这个排列为错排:有的叫重排.如,1 2的错 ...

  6. Hibernate Restrictions的运算符

    HQL运算符 QBC运算符 含义 = Restrictions.eq() 等于equal <> Restrictions.ne() 不等于not equal > Restrictio ...

  7. P2387 [NOI2014]魔法森林

    传送门 如果一条边只要考虑 $a$ 的限制,那么显然最小生成树 但是现在有 $a,b$ 两个限制,所以考虑按 $a$ 从小到大枚举边,动态维护 $b$ 的最小生成树 考虑新加入的一条边 $x,y$ , ...

  8. 对于position:relative,absolute,fixed的见解:

    1.switch--fixed,div脱离父元素,top,left,right,bottom都是相对于body,自己原来的位置不存在,即不占父元素位置了 2.switch--relative,div相 ...

  9. js数组去重 javascript版

    //js数组去重 //思路: // 1.放入第一个元素 // 2.放入第n个元素,和第n个之前的元素就行比较,如果有重复,则跳过.没有重复就加入数组中 // 3.返回新的去重后数组 Array.pro ...

  10. iptables 命令记录

    安装 原理 基本命令 实践 脚本 1.安装 以centos 7为例子安装 yum install -q -y iptables-services配置 iptables [-t table] comma ...