首先看看需求，tab栏上的一个active样式 //找到active时的选择器 .active::before { content: ''; width: 100%; height: 6px; background-color: green; display: inline-block; posit ...
分类：
Web程序 时间：
2020-07-01 17:28:24
阅读次数：
146
<head> <meta charset="UTF-8"> <title></title> <style> #parent { border: 1px solid blueviolet; } #childone { float: left; width: 200px; height: 400px; ...
分类：
其他好文 时间：
2020-07-01 12:25:25
阅读次数：
50
1、清除浮动的原因 （1）不清除浮动的情况： 由于父级的子元素不方便给高度（不给高度的时候父盒子的大小由里面包含的子盒子来决定），但是，子元素为浮动的又不占有位置，导致父级的盒子高度为0的时候就会影响下面的标准流的盒子。 <!DOCTYPE html> <html> <head> <meta cha ...
分类：
Web程序 时间：
2020-06-20 01:25:36
阅读次数：
78
伪元素选择器 ::first-letter —— 匹配指定选择器的首字母/首汉字 ::first-line —— 匹配指定选择器的首行。 ::selection —— 匹配元素中被用户选中或处于高亮状态的部分。 ::before —— 匹配被选元素的内容前面插入内容，可以与 content 配合使用 ...
分类：
其他好文 时间：
2020-06-14 20:49:24
阅读次数：
124
伪元素 :first-letter :first-letter用来选择文本块的第一个字母。常用于给文本添加排版细节，例如首字母下沉。 p:first-letter { color:#ff0000; font-size:xx-large; } :first-line :first-lin用来匹配元素的 ...
分类：
Web程序 时间：
2020-06-12 00:59:08
阅读次数：
85
一、伪类选择器 在页面中，有时候同一个元素在不同动作下有不同的样式。比如链接在没有点击的时候有个样式，在鼠标放上去有另外的样式，还有在点击完成以后又会又一个样式。这几种情况下这个链接的标签并没有变化，有变化的只是它的状态，这时候就可以里用伪类来实现这个需求。在浏览器中，伪类的出现是为了向某些选择器添 ...
分类：
Web程序 时间：
2020-06-09 14:33:23
阅读次数：
84
1.写在前面 在CSS3中，可以使用box-shadow属性来创建阴影效果来给二维平面增加深度效果，这个属性在前端开发中使用的非常多，例如segmentfault的首页就是使用了box-shadow属性来增加深度效果，今天我们就一起来看看这个属性。 2.box-shadow的基本语法 box-sha ...
分类：
Web程序 时间：
2020-06-08 14:24:59
阅读次数：
64
1 css 选择器：分为选择器，选择符，伪类和伪元素 选择器：标签选择器，类选择器 选择符5个：空格、> 、+ 、~ 、|| 伪类：例如:hover 伪元素：例如::before,::after 2 css选择器的优先级 0级：通配符选择器、选择符和逻辑组合伪类(:not()、:is()、:wher ...
分类：
Web程序 时间：
2020-06-07 21:34:39
阅读次数：
141
在网页中，如果需要使用辅助性/装饰性的内容的时候，我们不应该直接写在HTML中，这样会影响真正的内容，这就需要使用伪元素了，这是由于css的纯粹语义化是没有意义的。在使用伪元素的时候，会发现js并不真能直接控制它，这篇文章主要就介绍下如果间接的控制、修改css中伪元素的方法。 例如，我的样式表有以下 ...
分类：
Web程序 时间：
2020-06-07 16:24:43
阅读次数：
114
在css2中是这样定义二者的： CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。 伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。 第一点讲的是获取不存在与DOM树中的信息。比如<a>标签的:link、v ...
分类：
其他好文 时间：
2020-06-03 20:44:24
阅读次数：
75
