id选择器（#myid） 类选择器（.myclassname） 标签选择器（div,h1,p） 后代选择器（h1 p） 相邻后代选择器（子）选择器（ul>li） 兄弟选择器（li~a） 相邻兄弟选择器（...伪类与伪元素的区别 css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。...伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过 ::before 来在一个元素前增加一些文本，并为这些文本添加样式。...没有定位，元素出现在正常的流中（忽略top,bottom,left,right,z-index声明）。 inherit 规定从父元素继承position属性的值。 12. CSS3 有哪些新特性？
我们也 只 测试 webkit，当其他浏览器最终也可能支持该 text-stroke 属性时。记住这一点。 5.多种背景 该 background 属性已经过大修以允许在 CSS3 中使用多个背景。...当然，在现实世界的应用程序中，您可能会使用纹理，也可能使用渐变作为背景。...现在所有主流浏览器都支持此功能，您可以预期它可以在超过 99% 的设备上正常工作。...让我们模拟一个常见的效果，一旦您将链接悬停在侧边栏中，文本将略微向右滑动。...第 1 步.标记 我们会保持简单；在我们的 .box 容器中，我们将添加两个 divs：一个用于正面，另一个用于背面。
， 28 7月 2022 作者 847954981@qq.com 前端学习, 我的编程之路 CSS3进阶整理 CSS伪类 CSS伪元素–::after/::before 伪元素就是利用css在标签内部的前面或者后面添加一个行内元素...但当我们给子标签添加浮动float后，由于子标签的浮动状态导致父标签不会进行高度自适应，使其高度不存在。...} 事件伪类 事件伪类就是当进行对应事件时，会更改标签的样式，比较常见的如： li:hover{} //鼠标悬停 li:active{} //鼠标点击 input:focus{} //获取到焦点 列表伪类...这里有三个比较常见的： li:first-child{} //匹配父元素中的第一个子元素 li:last-child{} //匹配父元素中的最后一个子元素 最后一个为:nth-child(){}，这个伪类比较复杂...; color: #FFFFFF; } 阴影 CSS3中阴影分为两个 box-shadow盒子阴影 text-shadow文字阴影： div{ box-shadow: 0px 0px 10px
比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。...虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 伪元素用于创建一些不在文档树中的元素，并为其添加样式。...比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。...实际上，lang=””属性不只可以在html标签上设置，也可以在其他的元素上设置。...这个伪元素只能用在块元素中，不能用在内联元素中。
3、优势 减少开发成本与维护成本 在CSS3出现之前，开发人员为了实现一个圆角效果，往往需要添加额外的HTML标签，使用一个或多个图片来完成，而使用CSS3只需要一个标签，利用CSS3中的border-radius...提高页面性能 很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”，换句话说，在进行Web开发时，减少多余的标签嵌套以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。.../*查找拥有class属性并且值为Red的li标签*/ li[class=red] {} 3、E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签...2.2.6、空值：没有任何的内容，连空格都没有 li:empty{ background-color: red; } 2.2.7、锚链接伪类 E:target ：可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时...元素看待，它的用法和真正的DOM元素的操作是一样的，但是在DOM树中又不会出现。
也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。...伪类 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。...实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。...比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。 CSS3规范中要求使用单冒号:用于CSS3伪类，双冒号::用于 CSS3伪元素，目的是区分伪类和伪元素。...常见的伪元素选择器 ::first-letter 选择元素文本的第一个字 ::first-line 选择元素文本的第一行 ::before 在元素内容的最前面添加新内容 ::after 在元素内容的最后面添加新内容
CSS3介绍 CSS3在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。...CSS3的现状 浏览器支持程度不够好，有些需要添加私有前缀 移动端支持优于PC端 不断改进中 应用相对广泛 应对的策略：渐进增强 （1）坚持渐进增强的原则：让低版本浏览器能正常访问页面...CSS3 选择器 我们之前学过 CSS 的选择器，比如： div 标签选择器 .box 类名选择器 #box id选择器 div p 后代选择器...E::after 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。 E:after、E:before 在旧版本里是伪类，在 CSS3 这个新版本里是伪元素。...上图可以看出： 通过伪元素选择器，就可以添加出类似于span标签的效果（记得要结合 content 属性使用）。 通过这两个属性添加的伪元素，是行内元素，需要转换成块元素才能设置宽高。
CSS3对这两个概念做了相对较清晰地概念，并且在语法上也很明显的讲二者区别开。 伪类 - pseudo classes 首先看看CSS2中对伪类的定义： CSS 伪类用于向某些选择器添加特殊的效果。...简单翻译一下： 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。 伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。...并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。 其实第一段话就囊括CSS3伪类的全部定义了，这段话中指出CSS3伪类的功能有两种： 获取不存在与DOM树中的信息。...#tab1">标签一li> li>标签二li> li>标签三li> <...简单翻译一下： 伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。
id选择器（ # myid） 类选择器（.myclassname） 标签选择器（div, h1, p） 相邻选择器（h1 + p） 子选择器（ul > li） 后代选择器（li a） 通配符选择器（ *...Y轴的铺放，从而实现一种等高列的假像 模仿表格布局等高列效果：兼容性不好，在ie6-7无法正常运行 css3 flexbox 布局： .container{display: flex; align-items...添加额外标签，例如 div style="clear:both">div> 使用 br 标签和其自身的 clear 属性，例如 父元素设置 overflow...在 CSS 中伪类一直用 : 表示，如 :hover, :active 等 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after 后来在CSS3中修订，伪元素用 ::...font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙 把 li 标签写到同一行可以消除垂直间隙，但代码可读性差 overflow: scroll 时不能平滑滚动的问题怎么处理？
div> 是 div> 注意： before 和 after 创建一个元素，但是属于行内元素 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素...，权重为 1 应用场景一： 字体图标 在实际工作中，字体图标基本上都是用伪元素来实现的，好处在于我们不需要在结构中额外去定义字体图标的标签，通过content属性来设置字体图标的 编码 步骤： 结构中定义...div盒子 在style中先申明字体 @font-face 在style中定义after伪元素 div::after{...}...语法： width: calc(100% - 80px); 括号里面可以使用 + - * / 来进行计算 CSS3 过渡（★★★） 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用...Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
如下这个CSS3圆形风格的面包屑导航，在制作上就为开发者提供了除JS实现之外的思路。 ? 2. 涉及到的CSS3相关知识 2.1 CSS3选择器 主要功能是用于选择标签，有如下几个常用的选择器。...如下是选择器E:last-child的书写形式： ul.breadcrumb li:last-child a { padding: 0; } 2.2 CSS3圆角 主要功能是为标签添加圆角样式，...这种效果可以在鼠标悬停、鼠标单击、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。...功能的实现思路 3.1 结构与样式分析 当前效果主要是实现一个导航栏的制作，所以在结构上选用ul~li~a这样的标签组合，然后在a标签中放置span以放置导航的文本信息。...hover状态，在鼠标悬停到该导航项上时，导航项的大小变大，span标签的文字需要出现，具体代码如下： /*控制每个导航项中文本的出现*/ ul.breadcrumb li a .text {
，标记标签是用尖括号包围的关键词，以开始标签和结束标签成对存在，如和 HTML属性，给元素提供了更多信息，在开始标签中以名称/值的形式出现，如下例的href属性 HTML图像 没有闭合标签，src属性为图片地址，alt属性为当图片不能加载时的替换文本...>Coffeeli> li>Milkli> 无序列表始于 标签。...块级元素在浏览器中以新的一行开始和结束例如, , , ，内联元素如, , , HTMLdiv>元素 是块级元素，作为组合其他元素的容器...HTML 中不能使用小于号（），这是因为浏览器会误认为它们是标签。
伪类 - pseudo classes 首先看看CSS2中对伪类的定义： CSS 伪类用于向某些选择器添加特殊的效果。 单单看定义完全不懂在讲什么。...简单翻译一下： 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。...并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。 其实第一段话就囊括CSS3伪类的全部定义了，这段话中指出CSS3伪类的功能有两种： 获取不存在与DOM树中的信息。...#tab1">标签一li> li>标签二li> li>标签三li> <...简单翻译一下： 伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。
使用固定定位，在内容高于窗口高度时，就会挡住我们的内容。 随着CSS3的来临，最完美的实现方式是使用Flexbox。...实现的关键就是使用不太被关注的flex-grow属性，可以在我们的内容标签元素（比如div）中使用。在我们下面的例子里使用了main标签。 ---- 我来讲解一下实现原理吧。...悬停放大图片特效 悬停放大图片是一个特别吸引眼球的特效，比较常用于可点击的图片。当用户悬停鼠标在图片上，图片会稍微的放大。 其实实现这个特效是非常简单的。...首先我们需要一个div包裹这img标签，这个包裹层是用来遮挡住图片，当图片放大时不会出现图片超出我们规定的宽高以外。...知识总结 ::before | ::after — 伪类用于向某些选择器添加特殊的效果。 content — CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。
这种语义化标准主要是针对搜索引擎的 这些新标签页面中可以使用多次 在 IE9 中，需要把这些元素转换为块级元素 其实，我们移动端更喜欢使用这些标签 1.2 HTML5 新增的多媒体标签 使用它们可以很方便的在页面中嵌入音频和视频...before 和 after 创建一个元素，但是属于行内元素 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素 语法： element::before {} before 和 after 必须有...content 属性 before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素 伪元素选择器和标签选择器一样，权重为 1 实例如下： 添加双伪元素 【4】CSS3盒子模型 CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border- box，这样我们计算盒子大小的方式就发生了改变...> 【7】CSS新增属性 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
作者：codercao 原文链接：https://juejin.im/post/5b6d0c5cf265da0f504a837f 写在前面 伪类经常与伪元素混淆，伪元素的效果类似于通过添加一个实际的元素才能达到...，而伪类的效果类似于通过添加一个实际的类来达到。...青铜-3、伪元素实现悬停时按钮填充和边界浮动动画 效果：（完整代码见后文链接） ?...王者-2、使用CSS3伪元素实现的自动打字动画 原理:Typing Animation with Pseudo-Elements 看起来是打字，其实是使用伪元素覆盖在字符串上，然后逐渐减少伪元素覆盖宽度来实现的视觉效果...王者-5、伪类兼容性了解一下 1、IE8不支持CSS3中很多特性，比如伪元素nth-child，可以使用+号（代表相邻元素）来实现相同功能 2、Google的IE9.js是解决IE5.5到IE8，CSS3
div id="par">div> #par{ font-size:16px; } 注意：id名称不能以数字开头。 类选择器：选择有特定class属性的html元素，使用时在前边加 ....a:hover 鼠标悬停在链接上 a:link 未访问的链接 a:visited 已访问的链接 a:active 已选择的链接 div:hover { }鼠标悬停在div元素上，也可以控制鼠标悬停元素的子元素...，如： div:hover p{ font-size:20px } 鼠标停在div上时，子元素p中文字变为20像素。...在元素之前加入内容 p::first-line 文本的首行添加样式或内容 p::first-letter 文本的首字母添加样式或内容 属性选择器 为带有特定属性 [attribute] 的html元素设置样式...css选择器很多，css3也新增了很多选择器，我们后期在讲css3的选择器。上述讲的都是一些常见选择器，自己可在w3c中查看全部。
选择器出现的次数 C 值为 类选择器 和 属性选择器 和 伪类 出现的总次数 D 值为 标签选择器 和 伪元素 出现的总次数 比较时，权重从左到右依次减小。...的 E 元素 CSS3 E:enabled 匹配表单中激活的元素 E:disabled 匹配表单中禁用的元素 E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素...):nth-last-of-type(1) E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 E:not(s) 匹配不符合当前选择器的任何元素 伪元素：用于创建一些不在文档树中的元素...display: none：彻底隐藏元素，元素从文档流中消失，既不占据空间也不能交互，也不影响布局 z-index: -9999：将层级放到底部，被覆盖，看起来隐藏 transform: scale(...使用图片时将相应的类添加到元素中。
css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 公众号：前端印象 不定时有送书活动，记得关注~ 关注后回复对应文字领取：【面试题】、【前端必看电子书】、...【数据结构与算法完整代码】、【前端技术交流群】 想必很多前端小伙伴经常会在开发中遇到这样一个需求，就是在下划时，导航栏悬停在屏幕最上方，例如咱们的csdn： ?...正文 你只需要找到你导航栏的标签，给他添加以下样式，就可以实现导航栏悬停功能： 标签内容 div class="top">div> div class="tabber">导航栏div> 标签离浏览器顶部的距离没有达到我们设置的top值时，该标签都处于position: relative 的状态，占据文本流存在于内容中； 当标签离浏览器顶部的距离达到我们设置的top值时，...该标签处于position: fixed，一种固定状态，所以能达到悬停的效果。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
