一、伪类选择器 在页面中，有时候同一个元素在不同动作下有不同的样式。比如链接在没有点击的时候有个样式，在鼠标放上去有另外的样式，还有在点击完成以后又会又一个样式。这几种情况下这个链接的标签并没有变化，有变化的只是它的状态，这时候就可以里用伪类来实现这个需求。在浏览器中，伪类的出现是为了向某些选择器添 ...
分类：
Web程序 时间：
2020-06-09 14:33:23
阅读次数：
84
1 css 选择器：分为选择器，选择符，伪类和伪元素 选择器：标签选择器，类选择器 选择符5个：空格、> 、+ 、~ 、|| 伪类：例如:hover 伪元素：例如::before,::after 2 css选择器的优先级 0级：通配符选择器、选择符和逻辑组合伪类(:not()、:is()、:wher ...
分类：
Web程序 时间：
2020-06-07 21:34:39
阅读次数：
141
在css中使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。 （1）背景色过渡变化 下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开 ...
分类：
Web程序 时间：
2020-06-07 16:35:02
阅读次数：
232
使用 CSS 计数器 CSS 计数器本质上是 CSS 维护的变量，这些变量可以根据 CSS 规则增加以跟踪使用次数。 那么关于 CSS 计数器的使用，就需要读者智者见智了。有网友利用计数器制作文档的列表序号排序，也有网友利用计数器 + 伪类元素制作更华丽的效果。 使用计数器 语法 1.命名变量并定义 ...
分类：
Web程序 时间：
2020-06-04 21:44:16
阅读次数：
70
CSS 原生支持变量 不需要 各种预编译器 放 mdn 链接 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties 直接点 个人喜欢用 :root :root 伪类上设置自定义属性，然后在整个文档需要 ...
分类：
Web程序 时间：
2020-06-03 23:22:29
阅读次数：
88
在css2中是这样定义二者的： CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。 伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。 第一点讲的是获取不存在与DOM树中的信息。比如<a>标签的:link、v ...
分类：
其他好文 时间：
2020-06-03 20:44:24
阅读次数：
75
1 什么是伪元素？ CSS 在渲染文档的时候，伪元素可以通过 css 给 HTML 添加一个元素（叫标签也行），这个元素在文档树中是找不到的。伪元素被当做 CSS 的样式来进行展现，用法和普通的元素用法是一样的。 1.1 常用的伪元素和伪类 伪元素和伪类的写法有点像，伪元素使用2个冒号，常见的有：: ...
分类：
其他好文 时间：
2020-06-02 13:22:23
阅读次数：
58
a标签的伪类 概念 a标签可以根据用户行为不同，划分为四种状态，通过a标签的伪类可以将四种状态选择设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式 普通的类: 必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器上 伪类: 不需要给标签添加任 ...
分类：
其他好文 时间：
2020-06-01 12:15:53
阅读次数：
284
既然说到伪类，这里就用足够的代码给表现一下他们的神奇用法。从简单到复杂，可以清晰的看清到伪类的诸多使用方法，对于有些功能近似的就取其一举例了： :first-letter 为第一个字添加样式，这里用一个首字下沉的例子来演示一下： <!--html部分--> <p>中国是以华夏文明为源泉<!--内容省 ...
分类：
Web程序 时间：
2020-06-01 00:34:40
阅读次数：
77
