发表于: 2019-05-02 23:11:21
1 775
今天完成的事:
伪元素属性和样式
1.content属性
每个伪元素必须要有content属性,否则的话浏览器不能识别,你可以为content属性添加空引用作为它的值(即:content:“”)。
你也可以为content包含一个指向一个图像的URL,就像在css里包含一个背景图像一样:
p:before { content: url(image.jpg); }
2.标签属性
伪元素也是元素,所以你可以为它添加大部分其他元素具有的属性,比如定位属性,字体属性,背景属性和盒模型的属性等,另外由于伪元素默认是内联元素,所以如果要使得盒模型中的height等属性有效的话,必须要把它转化为块元素,具体就是设置其display属性为block,或者设置为float等。如下:
#example:after{ position: absolute; display: block; left: 20px; top: 20px; content: "\""; width: 20px; height: 20px; background: #6F3; }
既然伪元素可以定义position等属性,那么before和after的约束就很有限了,before和after的区别只能是在没有特殊定义伪元素的位置等信息的时候的默认行为不一致,before出现在相对绑定的元素之前,而after出现在相对绑定的元素位置之后。
另外既然可以为伪元素定义盒子模型的属性,就不得不说,伪元素默认为其目标元素的子元素,比如#example:after,伪元素after的父元素就是#example选择符对应的元素,它具有一般子元素盒模型的特性,即为他定义的height和width等属性规则为影响目标元素的规则。
过节真是忙,只能看看零碎的知识了
评论