伪元素 before 和 after 初探 使用了 CodePen 做演示，欢迎点击预览 定义 首先来看 MDN 的定义： ::before 创建一个伪元素，作为已选中元素的第一个子元素，常通过 content 属性来为一个元素添加修饰性的内容。 ::after 创建一个伪元素，作为已选中元素的最后 ...
分类：
其他好文 时间：
2019-11-30 22:43:47
阅读次数：
109
方法一： 代码-1： 缺点： 需要增加一个额外的HTML元素。这意味着该效果无法由css单独实现。 方法二： 伪元素方案 代码-2： 优点： 相对灵活，可一满足绝大多数人对遮盖层的期望。 缺点： 方法三：box-shadow方案代码-3： 1 上面的代码片段中第四个参数' 999px '是扩张参数， ...
分类：
其他好文 时间：
2019-11-29 18:14:57
阅读次数：
97
1. CSS盒模型 CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性， ...
分类：
Web程序 时间：
2019-11-25 20:21:46
阅读次数：
186
效果预览 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 http ...
分类：
Web程序 时间：
2019-11-24 11:33:02
阅读次数：
83
前言 因为业务需求, 要求我们的input框内的文本与悬浮的光标颜色不同, 这样的问题肯定在书本上很难找到解决办法， 需要通过平时的基础积累和经验。 解决方案 使用 ::first-line 伪元素 使用 text-shadow 和 text-fill-color 使用 caret-color :: ...
分类：
Web程序 时间：
2019-11-23 18:09:12
阅读次数：
80
1.选择器类型 1、ID #id 2、class .class 3、标签 p 4、通用 * 5、属性 [type="text"] 6、伪类 ：hover 7、伪元素 ::first-line 8、子选择器、相邻选择器 2.权重计算规则 1. 第一等：代表内联样式，如: style=””，权值为100 ...
分类：
Web程序 时间：
2019-11-15 09:31:56
阅读次数：
111
原文传送门： https://www.cnblogs.com/staro... 一、介绍 css3为了区分伪类和伪元素，伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-letter,::firs ...
分类：
其他好文 时间：
2019-11-13 11:28:16
阅读次数：
92
权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的 权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1 类型权重 ! important 无穷 行间样式 1000 id 10 ...
分类：
Web程序 时间：
2019-11-05 00:57:11
阅读次数：
89
4 结构性伪类选择器 在学习结构性伪类选择器之前，先了解两个概念：伪类选择器和伪元素选择器。伪类选择器是CSS中已经定义好的选择器，不能随便命名。常用的伪类选择器是使用在a元素上的几种，如a:link、a:visited、a:hover、a:active。而伪元素选择器并不是针对真正的元素使用的选择 ...
分类：
Web程序 时间：
2019-11-04 10:02:20
阅读次数：
80
