伪类主题的文章列表，还有伪类的技术要点_第1页

css伪类nth-child()怎么用

　在CSS3中nth-child()伪类对于在HTML中创建格式化的Excel样式表非常有用。也用于生成网格布局而不必求助于表格。　　首先我们来了解一下nth-child()伪类的相关知识。　　nth-child()伪类的基本规则：　　我们使用的语法是：nth-child（an+b）其中a是频率，b是初始偏移量。这生成...

开发笔记 ·2023-03-13

css中有什么伪类

css伪类有：“:link”、“:visited”、“:hover”、“:active”、“:focus”、“:lang()”、“not()”、&ldq...

开发笔记 ·2023-03-13

关于:before和:after伪类的那些事

说明---：before,:after的作用是在指定的元素内容（不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素。注：1、如果content的内容为空，则插入的内容默认是一个行内元素，并且在HTML代码中无法看到 2、如果没有content属性，则伪类元素没有...

代码星球 ·2021-02-22

nth-child()伪类选择器

描述：伪类:nth-child()的参数是an+b，如果按照w3.org上的描述，写成中文，很可能会让人头晕，再加上笔者的文笔水平有限，所以我决定避开an+b的说法，把它拆分成5种写法共5部分来说明。第一种：简单数字序号写法:nth-child(number)直接匹配第number个元素。参数number必须为大于0的...

代码星球 ·2021-02-20

【转】伪类选择器

原文地址：http://www.w3cplus.com/css3/pseudo-class-selector前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪...

代码星球 ·2021-02-15

css中常用的伪类

　　div:first-child 表示第一个div，代码如下　　<html><head><title></title></head><style>*{margin:0;padding:0;}.show>div{width:100p...

代码星球 ·2021-02-12

IOS手机伪类a:active失效

IOS手机伪类a:active失效：点击更改颜色，松开恢复解决方案：OS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态document.body.addEventListener('touchstart',function(){//...空函数即可});...

代码星球 ·2021-01-21

深入学习css伪类和伪元素及其用法

CSS的伪类和伪元素在平时的代码中经常会出现，可是一旦别人问你，什么是伪类，什么是伪元素，可能还是不能完整的表述出来，下面我们来一探究竟。伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。伪元素会创建一个抽象的伪元素，这个元素不是DOM中的真实元素，但是会存在于最终的渲染树中，我们可以为其添加样式。[重点]最常...

代码星球 ·2021-01-16

HTML <a> 标签的伪类

伪类的语法：selector:pseudo-class{property:value}CSS类也可与伪类搭配使用。selector.class:pseudo-class{property:value}例如：a.red:visited{color:#FF0000}<aclass="red"href="css_syn...

代码星球 ·2020-12-26

善用CSS伪类，不用JS也能做出选项卡功能

先看看Demo:CODEPEN示例页面讲到选项卡（Tabs）功能时，大多会想到用JavaScript去做，像知名的前端框架：Bootstrap所提供的Tab元件，就是用jQuery实现的（其实网络上有很多用jQuery开发的Tab）；但其实不用jQuery或JavaScript技术，就能实现高效能且易维护的Tabs元件...

代码星球 ·2020-12-24

CSS :placeholder-shown伪类实现输入框浮动文字效果

在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯css实现。当我们处理输入框时，会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的：label标签是关联表单元素，提供说明信息最适合的元素。输入框的placeholder属性允许您指定没有输入内容时出现在&l...

代码星球 ·2020-12-24

CSS :placeholder-shown伪类实现Material Design占位符交互效果

一、MaterialDesign规范中占位符交互效果MaterialDesign风格占位符交互效果官方示意见此demo页面。现在这种设计在移动端很常见，相信不少人设计项目中有实现过这种交互，而且，大部分是利用js实现的。（ps:weex不支持这个样式）实际上，我们可以借助css :placeholder-sh...

代码星球 ·2020-12-24

CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

前几天遇到一个页面需求是这样的：一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。需求：没有文字，没有聚焦——点赞没有文字，聚焦——灰色发送有文字——红色发送如果用js实现，需要监听输入框的change和focus事件，比较麻烦。但是用css中的伪类就可以...

代码星球 ·2020-12-24

CSS3伪类和伪元素的特性和区别

前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的:focus,:hover以及<a>标签的:link、visited等，伪元素较常见的比如:before、:after等。其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同...

代码星球 ·2020-09-13

CSS伪类:empty和:only-child

1、:emptya、匹配空标签元素<divclass="cs-empty"></div>.cs-empty:empty{width:120px;padding:20px;border:10pxdashed;} b、隐藏空元素--无法识别空格<divclas...

代码星球 ·2020-08-19