1 什么是伪元素? CSS 在渲染文档的时候,伪元素可以通过 css 给 HTML 添加一个元素(叫标签也行),这个元素在文档树中是找不到的。伪元素被当做 CSS 的样式来进行展现,用法和普通的元素用法是一样的。 1.1 常用的伪元素和伪类 伪元素和伪类的写法有点像,伪元素使用2个冒号,常见的有:: ...
分类:
其他好文 时间:
2020-06-02 13:22:23
阅读次数:
58
先看效果图 由于是截图,大小有些失真 实现分析 看到这个图,思考一下,就能明白,其实就两个难点: 左边的锯齿状是如何实现 中间的凹陷是如何实现 上述两个难点解决了,相信有css基础的都能写出这个组件。 实现锯齿效果 方法一:伪元素before和after .sawtooth { /* 相对定位,方便 ...
分类:
其他好文 时间:
2020-05-31 17:45:45
阅读次数:
59
伪类选择器 1 <style> 2 a:link{ # 未访问连接 3 color: green; 4 } 5 a:visited{ # 已访问连接 6 color: yellow; 7 } 8 a:hover{ #鼠标悬浮颜色 9 color: aqua; 10 } 11 a:active{ # ...
分类:
其他好文 时间:
2020-05-24 20:47:43
阅读次数:
51
伪类描述 :active{ ... } 元素 : active{ ... } 向被激活的元素添加样式。 :focus{ ... } 元素 : focus{ ... } 向拥有键盘输入焦点的元素添加样式。 :hover{ ... } 元素 : hover{ ... } 当鼠标悬浮在元素上方时,向元素添 ...
分类:
Web程序 时间:
2020-05-18 16:39:40
阅读次数:
80
CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在某个元素之前插入一些内容; ::after/:after 在某个元素之后插入一些内容; ::firs ...
分类:
Web程序 时间:
2020-05-17 19:15:58
阅读次数:
62
原文链接 - https://github.com/FrontEndRo... H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <!-- 1、HTML页面结构 --> <meta name="viewport" content="width=dev ...
分类:
其他好文 时间:
2020-05-17 19:06:39
阅读次数:
89
分组与嵌套div,p,span { /*逗号表示并列关系*/ color: yellow; }#d1,.c1,span { color: orange; }伪类选择器 Title 小轩在不在?点我有你好看哦伪元素选择器p:first-letter { font-size: 4... ...
分类:
Web程序 时间:
2020-05-14 01:37:35
阅读次数:
88
* 分组与嵌套* 伪类选择器* 伪元素选择器* 选择器优先级* css属性相关(操作标签样式)### 分组与嵌套```pythondiv,p,span { /*逗号表示并列关系*/ color: yellow; }#d1,.c1,span { color: orange; }```### 伪类选择器 ...
分类:
Web程序 时间:
2020-05-13 15:21:50
阅读次数:
79
1..伪类、伪元素 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::after在一些存在的元素前后添加文字样式等,这些被添加的内容会以具体的UI显示出来,被用户所看到的,这些内容不会改变文档的内容,不会出现在DOM中,不可复制,仅仅是在CSS渲染层加入。CSS3 ...
分类:
Web程序 时间:
2020-05-11 22:03:03
阅读次数:
84
html + css基础 ?基本的布局(中间自适应旁边固定啥的)的几种实现方法; ?垂直居中的几种实现方法; ?盒模型; ?position; ?行内元素和块元素; ?BFC(块级格式化上线文,和浮动一起考); ?animation; ?伪元素伪类; ?less、sass、stylus这种预处理器; ...
分类:
其他好文 时间:
2020-05-08 20:12:51
阅读次数:
71