##:root伪类:root伪类是匹配文档的根元素，很多时候，根元素也就是html元素，用root伪类来匹配根元素，目的就是解决根元素不是html的场景，比如根元素是svg的时候。root伪类的使用场景，我们引入某些UI库，很多时候，需要重置一些样式，就可以使用root伪类，这样就不担心重置的样式不生效了。因为伪类root的优先级更高。比如：```css:root{overflow-y:auto;scrollbar-gutter:stable;}```另一种情况就是在root伪类内定义变量，比如：```css:root{/*颜色变量*/--blue:#248600;--red:#f461cc;

文章目录一、CSS3结构伪类选择器二、E:first-child/E:last-child选择器1、E:first-child选择器2、E:last-child选择器三、E:nth-child(n)选择器1、E:nth-child(n)选择器语法说明2、n为数字的情况3、n为关键字的情况4、n为公式的情况5、子元素类型不同的情况四、E:first-of-type/E:last-of-type/E:nth-of-type选择器一、CSS3结构伪类选择器常见的结构伪类选择器:E:first-child选择器:E表示HTML标签类型,该选择器选择匹配的父容器中的第一个E类型标签子元素;ulli:fi

文章目录一、链接伪类选择器1、语法说明2、常用方式3、代码示例一、链接伪类选择器1、语法说明链接伪类选择器可以设置链接文本的不同状态的样式:未访问链接样式:默认的样式,界面打开后,默认显示该样式; a:link已访问链接样式:点击过的链接,链接变成该样式; a:visited鼠标移动到链接样式:鼠标移动到链接上方,链接变成该样式; a:hover选定链接样式:按下鼠标松开时,变成该样式; a:active链接伪类选择器语法:a:link{ 属性名称:属性值;}a:visited{ 属性名称:属性值;}a:hover{ 属性名称:属性值;}a:active{ 属性名称:属性值;}2、常用方式注意

CSS伪元素和伪类1.为什么要引入伪元素和伪类？在CSS的官方文档中，是这样描述的：CSSintroducestheconceptsofpseudo-elementsandpseudo-classestopermitformattingbasedoninformationthatliesoutsidethedocumenttree.意思是：CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。即，伪类和伪元素是用来修饰不在文档树种的部分。CSS中没有比如：“段落的第一行”、“文章首字母”之类的选择器，而这些部分在一些业务场景中又是需要控制的，这时候就需要用到伪元素和伪类了。2.伪类和伪元素的

一、伪类说明  定义：伪类⽤于向某些选择器添加特殊的效果  超链接（a标签）伪类：a标签我们在日常工作和学习中用的很多，我们只知道默认状态下为蓝色，但是a标签其实有四种状态。    1、未访问前为蓝色（如果a标签使用不是蓝色而是紫色，那么近期访问过该网站，需要去浏览器删除近期记录）  a:link     2、鼠标按着不松手时为红色 a:active    3、访问后为紫色     a:visited    4、鼠标移入变化   a:hover二、元素获取  定义：伪元素不是真正的元素，不存在与⽂档之中，所以js⽆法对它进行操作。为什么叫他“元素”？因为我们可以对其进⾏跟元素⼏乎⽆差别的操作 

存在伪元素的标签：1、大部分容器标签(大部分双标签)都有伪元素iframe没有伪元素2、大部分单标签都没有伪元素,但是img有伪元素伪元素简介：1、伪元素既然带一个“元素”，说明它和p，a，h1等一样，可以包裹住页面的一部分内容并对其中的内容施加一定的影响。我们可以通过样式表给其书写样式2、伪元素既然还带一个“伪”，说明它其实在DOM树中并不存在，只是逻辑上存在所以我们抽象出来的一个元素而已伪类简介：文档树的某个元素上并没有某个类，但是就好像在某种条件下，这个元素上被声明了这个类一样。例如:hover我们并没有在a元素上声明一个叫hover的类，但是当我们把鼠标悬停在a元素上时，这个a元素上就

在前端开发中，伪类是一种让你可以选择元素的某个状态或位置的CSS选择器。其中，:before和:after伪类允许你在一个元素之前或之后插入内容。:before和:after伪类创建的元素是不在HTML文档中的，它们是通过CSS生成的。可以用它们来在一个元素的前面或后面插入一些内容，这些内容可以是文本、图像或者其他任何可以用CSS生成的内容。before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。总之，before和after伪类允许你在一个元素前后插入内容，这些内容可以是文本、图

我有这么一个简单的代码:FooBar和这个CSS:.div1{position:relative;}.div1.div3{position:absolute;top:30px;left:0px;width:250px;display:none;}.div1:hover.div3{display:block;}.div2{width:200px;height:30px;background:red;}.div4{background-color:green;color:#000;}.div5{}问题是:当我将光标从.div2移动到.div3时(.div3应该保持可见，因为它是.div1)

我有这么一个简单的代码:FooBar和这个CSS:.div1{position:relative;}.div1.div3{position:absolute;top:30px;left:0px;width:250px;display:none;}.div1:hover.div3{display:block;}.div2{width:200px;height:30px;background:red;}.div4{background-color:green;color:#000;}.div5{}问题是:当我将光标从.div2移动到.div3时(.div3应该保持可见，因为它是.div1)

假设我想在链接被访问后在链接旁边添加一个形状(如复选标记)，而不是让它变成紫色，使用a:after和a:visited。我不确定是否应该选择这样的形状:a:visited:after{或者像这样:a:visiteda:after或a:visited:after{(我也不清楚什么时候应该或不应该在伪元素前添加空格，或者这有什么关系吗？)或者有什么不同？现在我的CSS看起来像这样:a:visited:after{/*checkmarkshape*/content:'\00a0';color:black;position:relative;left:15px;display:inline-b