css中的 : 指的是伪类，:: 指的是伪元素。 伪类 说明 :visited（a:visited） 选择所有已访问的链接 :hover（a:hover） 选择鼠标悬停其上的链接 :active（a:active） 选择活动的链接 :focus（input:focus） 选择获得焦点的 <input> 元素 :link（a:link） 选择所有未被访问的链接 :roo
1、emment语法（作用：提升html和css书写速度） 2、 复合选择器 1）由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签） 2）后代选择器、子元素选择器、并集选择器 重点 3、后代选择器 1）又叫包含选择器，可以选择父元素里面的子元素（儿子或
伪类和伪元素的根本区别在于：它们是否创造了新的元素。 伪类 是什么 用于已有元素处于某种状态时为其添加对应的样式。 语法 ： 使用数量 多个 使用位置 前方和后方 类与元素 修饰 使用场景 状态类： :link a链接未被访问时 :visited a链接已被访问时 :hover 鼠标悬停时 :active 鼠
总览 CSS选择器允许你通过类型、属性、位于HTML文档中的位置来选择元素。本教程阐述了三个新选项:is()、:where()和:has()。 选择器通常在样式表中使用。下面的示例会找到所有<p>段落元素并将字重更改为粗体： p { font-weight: bold; } 你也可以在JavaScript中使用选择器来找
css中选择器分为基础选择器和复合选择器两个大类。 基础选择器是由单个选择器组成的。包括：标签选择器、类选择器、id选择器和通配符选择器 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等 这30个CSS选择器，你必须熟记（上） 相邻两个有层级关系的节点，他们
1.CSS的选择器：基本选择器：标签 id class 高级选择器：层次选择器
伪类：是添加到选择器的关键字，指定要选择的元素的特殊状态 :hover 伪元素：可被用于为一个元素的 特定部分 应用样式 ::after 设置元素的首字母、首行的样式 在元素的内容之前或之后插入内容 选择器 例子 例子描述 ::after p::after 在每个 元素之后插入内容。 ::before p
Emmet讲解 认识emmet语法 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码, 如果手动来编写效果会非常低. VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab/Enter键即会自动生
p:first-of-type 选择属于其中父元素的首个<p>元素 p:last-of-type 选择属于其父元素的最后一个<p>元素 p:nth-child(2) 选择属于其父元素的第二个子元素 p:nth-type-of(2)选择属于其父元素的第二个子元素 p。 :enabled :disabled 控制表单控件的禁用状态 :checked 单选框或复选
一、结构伪类选择器 1、作用与优势： 作用：根据元素在HTML中的结构关系查找元素 优势：减少对于HTML中类的依赖，有利于保持代码整洁 场景：常用于查找某父级选择器中的子元素 2、选择器 选择器 说明 E:first-child{} 匹配父元素中第一个子元素，并且是E元素 E:last-child{} 匹配
超链接的伪类 /* 链接点击之前 */ a:link { color: blue; } /* 连接访问之后 */ a:visited { color: lightblue; } /* 鼠标放上去时 */ a:hover {
## CSS选择器### 3.1. 统配选择器* *### 3.2. 简单选择器(重要)* 元素 div* 类 .class* id #id### 3.3. 属性选择器* [att]* [att=val]### 3.4. 后代选择器(重要)* 全后代选择器 * 直接/间接 * 以空格分隔* 直接后台选择器 * 必须直接 * `>`符号### 3.5.
原来是谷歌浏览器的问题，换成edge就可以了，具体原因还是不知道，不确定是不是兼容问题 对div使用伪类:last-child，希望讲c++的文字变成红色，但是失败了，记录一下以后解决 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
看到:nth-of-type()的时候突然想起来了，如果想要跟元素挂钩的话得用这个伪类，样式表选择的是p标签来应用，但是2号位不是p标签选不中就不会生效 在段落9的上面加入div标签，使用nth-last-child(2)伪类的时候，括号里的数字是2的话会失效，目前还不知道问题，记录一下等以后来解决 <!DOCTYPE h
1、结构伪类选择器 2、伪元素 3、浮动 4、清除浮动
这两天在做一个需求，要通过引入css文件对现有表单样式做一些自定义修改，发现原有二开css样式文件里有大量类似的样式分组出现： 尽管已经使用了并集选择器进行了分组，但这些看起来依然是太可怕了！难道没有更简洁优雅的书写方式了吗？ 于是，打开万能的mdn，翻到css，选择器，选择器列表的时候，发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
CSS 布局（一）：Flex 布局 CSS 选择器（一）：属性选择器 CSS 实战（一）：伪类+属性选择器实现主题切换
CSS伪类 伪类 是用来添加一些选择器的特殊效果。 伪类 选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
伪元素和伪类 css2中的伪类和伪元素 css2规范中 伪元素和伪类都是在前面加单冒号 例如： :before,:hover等.... 锚伪类：a标签的伪类 a:link 向a标签添加样式 a:visited 改变已访问标签的颜色（默认蓝色）注意此伪类只能定于颜色 a:hover 向鼠标停留时添加样式 a:active 向选定的链接
伪类 伪类用于当已有元素处于某种状态时，为其添加对应的样式，这个状态是根据用户行为变化而变化的。比如说:hover。它只有处于dom树无法描述的状态才能为元素添加样式，所以称为伪类。 伪元素 伪元素用于创建一些原本不在文档树中的元素，并为其添加样式，比如说:before。虽然用户可以看到
改编自 一、伪元素有哪些 首先，先简单说一下伪元素都有哪些。伪元素有六个，分别是 ::after、::before、::first-line、::first-letter、::selection、::backdrop 。 在各大网页中最常用的伪元素，是::after和::before。 这几个伪元素的语意可参考另外一篇文章《CSS伪元素选择器 总结》
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
一 优先级 ！important 最优先 > 内联样式[行内样式] > id类 > 类、伪类 、属性选择器 > 伪类元素选择器、标签选择器 权重 ： 100% > + 1000 > +100 > +10
场景： 遍历请求来的数据，使用弹性盒布局，左右各一份并且换行，并且使用justify-content:space-around。 拉到最后一个显示的数据，发现最后一个图片理应另起一行显示在左边，但是发现图片孤零零的被置于中间，严重影响美观。 根源： 因为奇数个数据在使用弹性盒排列时，必然会出现有尾巴另起一行
