前端css伪类

前端CSS面试常见题

边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子

剑亦未配妥·2024-09-15 23:07

CSS中如何实现鼠标悬停效果？

在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。

神明木佑·2024-09-15 08:32

CSS基本语法结构

基本选择器2.4.1标签选择器2.4.2类选择器2.4.3ID选择器3.CSS的高级选择器3.1层次选择器3.1.1后代选择器3.1.2子代选择器3.1.3相邻兄弟选择器3.1.4通用兄弟选择器3.2结构伪类选择器

nice66660·2024-09-11 12:27

前端基础面试题·第二篇——CSS（其一）

1.伪类与伪元素伪类，是用来描述元素的一个状态，比如第一个元素，元素被鼠标覆盖等等状态，写法为：伪元素，用于设置一个元素的特殊状态的一部分，写法为::伪元素于伪类：伪元素：::before::after

DT——·2024-09-11 04:28

前端基础面试题·第二篇——CSS（其二）

important-强制生效样式-有即生效行内样式-有即生效权重：1000id选择器权重：100类选择器，伪类，属性选择器权重：10元素选择器，伪元素选择器，权重：1通配符，兄弟，后代，子代，权重：02

DT——·2024-09-11 04:27

flex布局篇——justify-cont:center/space-between/space-around最后一行靠左

为了解决这个办法，可用gap与伪类进行纠正：name备注.box{position:absolute;width:100%;padding:125rpx70rpx;box-sizing:bo

Dove言和·2024-09-09 14:01

flex弹性布局；justify-content:space-between；最后一行左对齐

第一种方式：需要在父级元素使用一个伪类,设置flex:1；使伪类自动填充剩余的空间；这种方式会使最后一行的边距失效:after{content:"";flex:1;}第二种方式：使用margin-right

m0_56168677·2024-09-09 14:00

css-深度选择器-vue2

/deep/伪类在Vue2.x中是一个被废弃的特性，并且在Vue3.x中已经移除。

"*smile*"·2024-09-06 22:14

CSS选择器

标签选择器2）id选择器3）类选择器4）通配选择器2、交集选择器3、派生选择器1）后代选择器2）子元素选择器3）兄弟选择器4）邻居选择器4、属性选择器1）简单属性选择器2)具体属性选择器3）子串属性选择器5、伪类选择器

Mr.蔬菜·2024-09-05 20:45

认识H5标签和CSS3新特性

developer.mozilla.org/zh-CN/docs/web/guide/HTML/HTMLHTML5新标签语义化标签视频标签音频标签input新标签及新属性CSS3新选择器属性选择器结构伪类选择器此前学习过的

8c2e58e492bd·2024-09-05 17:51

CSS学习1

CSS前言一、类选择器二、id选择器三、通配符选择器四、伪类选择器1.链接伪类选择器2.结构（位置）伪类选择器3.目标伪类选择器前言CSS：层叠样式表样式规则：选择器{属性：值；属性：值；}一、类选择器类选择器

乌鸦不像写字台·2024-09-04 22:53

CSS 之动态九宫格效果

只要你对效果中使用到的：CSS自定义属性、:has()伪类选择器、trasition过渡等CSS知识点熟料掌握，那么该效果实现起来可以说是相当简单。该效果可以应用在图

努力的小朱同学·2024-09-03 18:58

解决移动端跳转问题——CSS过渡、target伪类

前言很多刚刚接触移动端的小伙伴都可能对于点击跳转路由这方面有些疑惑，特别是运用了Vue路由，因此这篇文章就带领小伙伴一起尝试用css进行页面跳转效果如图，由于是移动端，所以选择预览的手机模拟：1.gifHTMLshouyezhanlangerenshouyezhanlangeren主要分为main和nav两部分，其中main中包含的三个div表示三个不同的页面，同时对应的nav中三个不同的a，特别

Nice先生的狂想曲·2024-09-02 19:24

白骑士的CSS教学高级篇之高级选择器与伪类 4.2.2 伪类

伪类选择器是CSS中一种非常强大的工具，允许我们根据元素的特定状态来应用样式。通过使用伪类选择器，你可以创建更具交互性和动态性的网页。

白骑士所长·2024-09-02 06:41

HTML 中 a 超链接标签全解析：属性、锚点与伪类

目录a超链接标签介绍锚点介绍页面内锚点页面外锚点伪类a超链接标签介绍在HTML中，标签是一个文本级的标签，同时它还包含伪类，用于根据用户与链接的不同交互状态呈现不同的样式。

前端基地·2024-08-31 12:49

纯css实现tab切换

1、利用a标签target，点击之后对应id的div会有:target伪类。

Allan要做活神仙·2024-08-29 08:59

css基础学习总结(一)

文章目录一.选择器1.标签选择器2.类选择器3.ID选择器4.分组选择器5.派生与子元素选择器6.属性选择器7.伪类选择器8.伪对象选择器9.选择器的优先级别css优先级的6大分类一.选择器1.标签选择器选择器例子描述

晚睡早起₍˄·͈༝·͈˄*₎◞ ̑̑·2024-08-29 08:02

前端CSS：CSS的Flexbox布局

前端CSS：CSS的Flexbox布局引言Flexbox布局基础基本概念作用说明示例一：基本的Flexbox布局示例代码解释说明示例二：使用Flexbox进行响应式布局示例代码解释说明示例三：多方向的Flexbox

DTcode7·2024-08-27 18:19

33.带前缀的输入框 & 带图像剪切的卡片

使用:focus-within伪类选择器来相应地设置父元素的样式,当用户与字段交互时。<spanclass="

@大迁世界·2024-08-26 13:36

31. 高度过渡 & 带粘性分区标题的列表

使用:hover伪类将max-height更改为由JavaScript设置的--max-height变量的值。使用Element.scrollHeight和CSSSty

@大迁世界·2024-08-26 13:06

CSS的国际化伙伴：:lang()伪类的深度解析

标题：CSS的国际化伙伴：:lang()伪类的深度解析在全球化的今天，网站和应用程序常常需要展示多种语言的内容。

2401_85812053·2024-08-26 08:34

css-文字对齐问题 text-align: justify

--如果你的文字只有一行,是不生效的.所以要利用下伪类(给伪类设置宽度100%).一个text-align-last:justify;可以搞定,但是有兼容性问题.p{width:500px;text-align

YogaMiller·2024-08-24 09:48

CSS的:placeholder-shown伪类：精确控制输入框占位符样式

随着Web开发技术的进步，CSS不断引入新的选择器和伪类，以增强开发者对页面元素的控制能力。

2402_85758349·2024-08-24 05:50

前端：篮球投掷动画

亮点：使用复选框和伪类选择器代替JS实现按钮控制效果。使用多重渐变完成背景的绘制。

懒羊羊大王呀·2024-08-24 03:34

css伪类动画效果

一、before和after伪元素(详解)之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查content一定要设置，否则为伪元素失

酷爱打戴马·2024-08-23 00:19

CSS的:read-write和:read-only伪类：增强表单元素的样式与用户体验

随着Web开发的不断进步，CSS提供了越来越多的伪类来增强开发者对页面元素的控制能力。

liuxin33445566·2024-08-23 00:16

CSS系列:伪类选择器小记

目录一、关键是理解而不是记二、为啥需要伪类选择器1、表达元素的特定状态2、选择特定位置的元素3、选择特定属性的元素4、增强可访问性5、无需额外的HTML标记三、为啥需要伪元素选择器1、访问和样式化文档的特定部分

浪潮行舟·2024-08-22 23:14

CSS的:indeterminate伪类：精妙控制不确定状态的样式

CSS的:indeterminate伪类是一个强大但较少为人所知的工具，它允许开发者选择那些处于不确定状态的元素，如未选中但也不完全未勾选的复选框（checkbox）。

哎呦没·2024-08-22 23:14

CSS的:only-child伪类：精准定位单一子元素的样式艺术

:only-child伪类是CSS3中引入的选择器之一，它用于选择一个元素，当且仅当它是其父元素的唯一子元素。这个伪类在处理布局和样式时非常有用，特别是当你需要为具有特定子元素数量的父元素定制样式时。

2402_85758349·2024-08-22 23:44

CSS方向选择的艺术：深入探索:horizontal和:vertical伪类

其中，:horizontal和:vertical伪类是CSSLevel4中引入的两个实验性选择器，它们允许开发者根据元素的方向来应用样式。

2401_85702623·2024-08-22 23:43

27.CSS 伪类是什么? & 屏幕外

CSS伪类是什么?CSS伪类提供了一种根据元素状态的变化来设置样式的方法。例如,:hover可用于在用户的指针悬停在元素上时应用额外的样式。

@大迁世界·2024-08-22 23:41

CSS的:dir()伪类：根据文本方向定制样式的指南

CSS3引入了:dir()伪类选择器，它允许开发者根据元素的文本方向来应用特定的样式规则。本文将详细介绍:dir()伪类的使用方法，并结合代码示例展示其在实际开发中的应用。

2401_85439108·2024-08-22 23:40

[Qt][QSS][上]详细讲解

目录0.前言1.基本语法2.QSS设置方式1.指定控件样式设置2.全局样式设置3.从文件加载样式表4.使⽤QtDesigner编辑样式5.总结3.选择器1.选择器概况2.子控件选择器3.伪类选择器0.前言

DieSnowK·2024-08-22 06:33

CSS的:defined伪类：选择已定义元素的新选择器

CSS（层叠样式表）是控制网页样式的核心语言，随着CSS4的提出，一系列新的选择器被引入，其中:defined伪类便是这些新特性之一。

2401_85743969·2024-08-21 19:48

web前端css基本内容

web前端css当我们用html的语法给内容规划布局样式时，可能会出现许多个相似的内容需要运用同一种样式，复制粘贴太麻烦而且如果后期要改动的话比如把许多个地方从红色改成蓝色，就需要一个一个改了，这时候就需要引入

刘zy_9527·2024-03-03 09:28

css选择器

说明伪类选择器（如:hover）和属性选择器

xiaobai_cpp·2024-03-02 22:14

CSS3新特性和CSS3动画

CSS3的新特性1.选择器：（1）属性选择器：[属性名][属性名=属性值][属性名^=属性值][属性名$=属性值][属性名*=属性值]（2）伪类选择器：为特定状态的元素添加样式，例如:hover、:active

·2024-02-28 15:03

Chrome DevTools调试技巧

【1】DevTools触发伪类右键单击Elements面板中的元素节点并选择“forcestate”。或者在Sytle子窗格中单击“：hov”图标。

dingFY·2024-02-28 07:32

带你熟练掌握 css 基础

2.1css的注释2.2格式规范三、选择器的种类四、基础选择器4.1标签选择器4.2类选择器（常用选择器）4.3id选择器4.4通配符选择器五、复合选择器5.1后代选择器5.2子选择器5.3并集选择器5.4伪类选择器六

鸢也·2024-02-20 23:28

web CSS3伪类选择器 :nth-child()

:nth-child()可以选择某个的一个或多个特定的子元素，你可以按这种方式进行选择：:nth-child(length);/*参数是具体数字*/:nth-child(n);/*参数是n,n从0开始计算*/:nth-child(n*length)/*n的倍数选择，n从0开始算*/:nth-child(n+length);/*选择大于length后面的元素*/:nth-child(-n+lengt

worldzhy·2024-02-20 21:11

CSS的伪类选择器:nth-child()

CSS的伪类选择器:nth-child()CSS的伪类选择器:nth-child()是一个非常强大的工具，它允许你根据元素在其父元素中的位置（序数）来选择特定的子元素。

kfepiza·2024-02-20 21:38

openGauss学习笔记-08 openGauss 数据类型

8.6几何类型8.7网络地址类型8.8位串类型8.9文本搜索类型8.10UUID数据类型8.11JSON/JSONB类型8.12HLL数据类型8.13范围类型8.14索引8.15对象标识符类型8.16伪类型

superman超哥·2024-02-20 20:40

2024前端面试准备之CSS篇（一）

>类选择器>标签选择器计算示例：优先级由A、B、C、D的值来决定的，其中它们的值计算规则如下：A的值等于1的前提是存在内联样式,否则A=0B的值等于ID选择器出现的次数C的值等于类选择器和属性选择器和伪类出现的总次数

前端fighter·2024-02-20 18:09

有趣且重要的css知识合集（8）知道子元素，如何修改父元素样式？

这个伪类通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。

林大大哟·2024-02-20 10:02

sass/scss基础使用（node|dart-sass区别、安装、搭配VScode的Easy Sass使用、基础语法、变量$、插值#{}、嵌套、父元素&、静默注释、数学运算、循环、混合、继承、函数）

目录Sass|Scss介绍版本（node|dart-sass）区别安装搭配VScode使用EasySass注意设置常见报错Scss(Sass)基础语法变量插值（#{}）嵌套伪类、伪元素|父元素表示（&）

YF-SOD·2024-02-20 10:26

前端开发常用技巧（update...）

前端开发常用技巧JS1、JavaScript删除子节点的方法2、JS动态生成div并添加点击事件CSS1、文本溢出处理2、使用伪类添加下划线3、使用伪类添加下划线下划线居中4、输入框默认字体颜色5、CSS

一只程序猿小白·2024-02-20 06:19

css设置背景模糊

就会造成文字和里面的图片都会被模糊化.bgc{height:300px;position:relative;background:#8c8c45;filter:blur(15px);}这里需要在需要设置背景的div的伪类里来设置

riyue666·2024-02-19 22:47

2024前端面试准备之CSS篇（二）

全文链接1.什么是伪类和伪元素伪类（Pseudo-class）:伪类是选择器的一种，用于选择特定状态或条件下的元素。它们以冒号（:）开头，用于向选择器添加额外的特定条件。

前端fighter·2024-02-19 21:54

CSS进阶

文章目录CSS进阶复合选择器后代选择器子代选择器并集选择器交集选择器伪类选择器超链接伪类CSS特性继承性层叠性优先级基础选择器复合选择器-叠加Emmet写法背景属性背景图平铺方式背景图位置背景图缩放背景图固定背景复合属性显示模式块级元素行内元素行内块元素转换显示模式

一只小松许捏·2024-02-19 13:30

empty伪类

/*:empty:空的*/div{width:300px;height:100px;border:1pxsolid#000;margin-top:20px;}/*如果div是空的则会被选中*/div:empty{background-color:red;}span

琪33·2024-02-14 23:23

推荐频道