文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Web前端，认识css，css规格，伪类和伪元素的用法，代码详解！

我们在chrome、firfox开发者工具中任意右键点击一个元素会看到一个菜单。接下来我们介绍一下伪类。Are you ready ? 链接伪类 在浏览器中样式的时候它们可以帮助我们快速的进行变换。...首先介绍一下链接伪类，因为任何一个链接始终都会处于下边四个状态之一 link 链接等着用户点击 visited 用户点击过这个链接 hover 鼠标悬停在链接上 active 链接正在被点击 伪类的写法...看到上面的例子，可以看到a标签也就是链接在初始的状态的时候是blue ，当鼠标悬停在上方状态为 red，当鼠标点击链接其中的字体变大并且加粗了（为了效果而已），最后呈现的状态visited 。...比如用户悬停的时候给一个鲜艳的颜色，为了告诉用户快tm点我（毕竟是一个妖艳贱货๑乛乛๑）。...其它伪类、结构伪类 focus 获取焦点，表单中使用 target（不常用） 当用户点击一个指向页面中其它元素（target）的链接时，可以通过此伪类选择 first-child、last-child

1.6K60

全栈之前端 | 11.CSS3基础知识之列表链接学习

cursor 属性 - 设置鼠标指针悬停在元素上的样式 :link 伪类 - 默认链接状态 :visited 伪类 - 已访问链接状态 :hover 伪类 - 鼠标停留选中链接状态 :focus 伪类...- 键盘焦点选中链接状态 :active 伪类 - 点击访问链接状态 ::before 伪元素 - 匹配元素的第一个子元素 ::after 伪元素 - 匹配元素的最后一个子元素 0x01 列表相关样式属性... 执行结果: 0x02 链接相关样式属性 描述: 在网页中基本都会使用标签来规定，鼠标点击后调整的新的域名站点，此章作者为链接添加样式来实现常用的功能...CSS 伪类会在用户访问链接后生效，出于隐私保护的原因，使用该选择器可以修改的样式非常有限（即在跟踪用户点击访问的链接可以使用），搞红蓝对抗的应该有了解。...:focus CSS 伪类表示获得焦点的元素（如表单输）, 即当用户点击或轻触一个元素或使用键盘的 Tab 键选择单表以及链接时，它会被触发。

76410
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    一篇文章带你了解CSS Pseudo-classes(伪类 )

    CSS伪类允许设置元素的动态状态的样式，例如悬停，活动状态和焦点状态，以及文档树中现有但不能通过使用其他选择器作为目标的元素，而无需添加任何选择器它们的ID或类。 例如，针对第一个或最后一个子元素。...这些伪类使可以对未访问的链接进行样式化，而对访问的链接进行样式化。最常见的样式设置技术是从访问的链接中删除下划线。 例 伪类是动态的，是由于用户与文档进行交互（例如悬停或聚焦等）而应用的。...这些伪类更改了响应用户操作呈现链接的方式。 : hover 当可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色用。 : active 当元素被激活或单击时适用。...在下面的示例中class="red"，带有的链接将显示为红色。 <!

    2.8K10

    CSS入门指南-1：css工作原理

    为文档添加样式的三种方法： 写在元素标签里（也叫行内样式，只能影响它所在的标签，会覆盖嵌入样式和链接样式） 写在 标签里（也就嵌入样式，应用范围仅限于当前页面，页面样式会覆盖外部样式表中的样式...两个冒号(::)表示新增的伪元素。 UI伪类 UI伪类会基于特定的HTML元素的状态应用样式。 链接伪类 针对链接的伪类有4个： Link。 此时，链接为被点击 Visited。...用户点击过链接之后 Hover。鼠标悬停在链接上 Active。...如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标，可以用:target 选中。...如果两条规则都影响某一元素的属性，特指度也相同，后出现的胜出。

    1.2K20

    这30个CSS选择器，你必须熟记（中）

    浏览器兼容性： IE7+ Firefox Chrome Safari Opera 13、X[href^="http"]：匹配属性值开头的选择器 你是否想过怎么让所有链接旁边加个小图标提示用户是外部链接吗...，要记住的是这些样式对gif和png结尾的图片链接是无效的。...Safari Opera 17、X:checked：选中状态选择器 css单选按钮和复选按钮的默认样式很有限，如果我们想定义个性化的选择后的状态样式，可以使用选中状态选择器，示例代码如下： input...Safari Opera 19 X:hover 鼠标悬停状态选择器 这个选择器，用的频率也比较高，想必大家都清楚，正是的叫法应该是用户操作交互伪类：user action pseudo class，比如想给用户鼠标悬停的元素加上样式...浏览器兼容性： IE6+ （只能用于链接标签） Firefox Chrome Safari Opera 20 X:not(selector) 否定伪类选择器 前面我们学的都是肯定选择器，如果反过来就是否定选择器

    88900

    这30个CSS选择器，你必须熟记（中）

    浏览器兼容性： IE7+ Firefox Chrome Safari Opera 13、X[href^="http"]：匹配属性值开头的选择器 你是否想过怎么让所有链接旁边加个小图标提示用户是外部链接吗...，要记住的是这些样式对gif和png结尾的图片链接是无效的。...Safari Opera 17、X:checked：选中状态选择器 css单选按钮和复选按钮的默认样式很有限，如果我们想定义个性化的选择后的状态样式，可以使用选中状态选择器，示例代码如下： input...Safari Opera 19 X:hover 鼠标悬停状态选择器 这个选择器，用的频率也比较高，想必大家都清楚，正式的叫法应该是用户操作交互伪类：user action pseudo class，比如想给用户鼠标悬停的元素加上样式...浏览器兼容性： IE6+ （只能用于链接标签） Firefox Chrome Safari Opera 20 X:not(selector) 否定伪类选择器 前面我们学的都是肯定选择器，如果反过来就是否定选择器

    89610

    CSS魔法堂：稍稍深入伪类选择器

    前言  过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器，最近看书时发现这方面有所欠缺，于是决定稍微深入学习一下，以下为伪类部分的整理。...伪类  伪类选择器实质上是让设计师可以根据元素特定的状态，设置不同的视觉效果。...HTMLAnchorElement的4大经典伪类 :link，用于设置链接初始状态时的样式; :visited，用于设置链接被点击过后的样式; :hover，用于设置鼠标悬停在链接上方时，链接的样式;...:active，用于设置鼠标按键按下，但未释放时，链接的样式。  ...想必各位都和我一样，最初接触到的就是上述4个伪类了吧？！而且还死机硬背它们的设置顺序(LVAH)吧，哈哈。 设置当前目标元素样式  还记得URL中的井号吗？

    1.4K20

    深入解析 CSS 选择器

    动态伪类（多用于超链接的样式） /* 未访问的链接 */ a:link { color: #11698e; } /* 已访问过的链接 注:只要是当前浏览器有访问记录的都算作已访问的状态...*/ a:visited {color: #9fb8ad; } /* 当鼠标悬浮在元素上方时 */ /* 注: 为了使点击过后的链接仍然受设置的伪类样式影响，在CSS 定义时 :hover...需设置在 :link 和 :visited 之后 */ a:hover{ color: #383e56; } /* 被激活的元素 (鼠标点下且为松开时) */ /* 注: 为了使点击过后的链接仍然受设置的伪类样式影响...fileGuid=YyjgWGpdPtQkxxYD) 目标伪类、否定伪类、语言伪类 html { font-size: 14px; } /* 目标伪类 :target:...代表一个唯一的页面元素(目标元素)，其 id 与当前URL片段匹配 */ div:target { color: #f05454; } /* 否定伪类 :not 注: 仅 Chrome

    92150

    CSS中的伪类

    伪类解决的问题 伪类主要解决了以下问题： 状态样式化：允许开发者为元素的不同状态（如悬停、点击、获取焦点等）定义特定样式。...:active :active伪类用于选择被用户激活的元素，通常是指被点击的瞬间。 button:active { background-color: blue; } 3....应用样式：将伪类选择器的样式规则应用到匹配的元素上。 动态更新：当元素状态发生变化（如鼠标悬停、获取焦点等），浏览器重新计算并更新样式。...样式冲突：不同伪类选择器可能会产生样式冲突，影响网页的正常显示。 伪类滥用：滥用伪类选择器可能会导致性能问题和安全风险。 安全最佳实践 限定伪类作用范围：尽量限定伪类选择器的作用范围，避免样式泄漏。...当用户点击导航链接时，目标文章段落会被高亮显示，方便用户阅读。

    1.3K10

    CSS选择器分类

    p.par{ font-size:16px; } 通用选择器（*）:选择页面上的所有html元素，设置的样式会影响全部元素...a:hover 鼠标悬停在链接上 a:link 未访问的链接 a:visited 已访问的链接 a:active 已选择的链接 div:hover { }鼠标悬停在div元素上，也可以控制鼠标悬停元素的子元素...伪元素选择器 伪元素用于设置元素指定部分的样式，如元素首行、之前、之后等插入内容。...在元素之前加入内容 p::first-line 文本的首行添加样式或内容 p::first-letter 文本的首字母添加样式或内容 属性选择器 为带有特定属性 [attribute] 的html元素设置样式...a[target]{ background:red } /* 设置背景为红色 */，带有target属性的a标签 a[href="http:baidu.com"]，选带有href="http:baidu.com

    1.3K20

    CSS选择器分类

    p.par{ font-size:16px; } 通用选择器（*）:选择页面上的所有html元素，设置的样式会影响全部元素...a:hover 鼠标悬停在链接上 a:link 未访问的链接 a:visited 已访问的链接 a:active 已选择的链接 div:hover { }鼠标悬停在div元素上，也可以控制鼠标悬停元素的子元素...伪元素选择器 伪元素用于设置元素指定部分的样式，如元素首行、之前、之后等插入内容。...在元素之前加入内容 p::first-line 文本的首行添加样式或内容 p::first-letter 文本的首字母添加样式或内容 属性选择器 为带有特定属性 [attribute] 的html元素设置样式...a[target]{ background:red } /* 设置背景为红色 */，带有target属性的a标签 a[href="http:baidu.com"]，选带有href="http:baidu.com

    1.7K50

    最全HTML与CSS基础总结，不进来看看吗？

    CSS选择器 1.三种样式表总结 2.CSS基础选择器 3.font字体 4.CSS外观属性总结 5.链接伪类选择器 6.复合选择器总结 7.背景总结 四....一个是没有语义，没有强调作用 语义好的网页更受SEO的喜欢，在搜索引擎里面的排名会更靠前 SEO优化 ===> 在输入关键字的时候，搜索引擎会罗列很多很多的网页出来，而用户基本习惯都是点前面的网页，不会去点后面的网页...，所以如果网页在搜索引擎中的排名更加靠前，那么自然而然会带来更多的用户点击访问。...base 可以设置整体链接的打开状态 base 写到 之间 把所有的连接 都默认添加 target="_blank" 7.特殊符号 一些特殊的符号，我们再html 里面很难或者 不方便直接 使用， 我们此时可以使用下面的替代代码...链接伪类选择器 a:link /* 未访问的链接 / a:visited / 已访问的链接 / a:hover / 鼠标移动到链接上 / a:active / 选定的链接 */ 6.复合选择器总结 ①

    1.3K20

    CSS 实用新特性：交互、组件、效率的革新

    当鼠标悬停在其中一个链接上时，目标锚点会发生变化，浏览器会自动移动目标以应用定位，同时还会为颜色添加动画效果，呈现出简洁而美观的效果。...在以下演示中，标签在用户悬停在图标上时能够以流畅的动画效果调整宽度。...验证状态管理技术核心：:user-valid 和 :user-invalid 伪类，其行为与 :valid 和 :invalid 伪类类似，但只有在用户与输入内容进行了显著互动后，才会与表单控件匹配。...场景案例：适用于注册表单中，用户输入无效邮箱并点击提交后，提示错误信息，而非初始加载即报错。开发价值：替代 :invalid 和 :valid 逻辑，避免过早干扰用户，提升表单交互的友好性。...（三）手风琴组件（折叠展开面板）技术核心：使用  与  标签实现折叠 / 展开功能，结合  展开状态样式（如 [open] 属性）及伪类（如 ::details-content

    1.6K10

    全栈之前端 | 2.CSS3基础知识之选择器学习

    特定状态下的特定元素（比如鼠标指针悬停于链接之上） a:hover 选择仅在鼠标指针停在链接上时的 元素 关系选择器 将其他选择器组合起来，更复杂的选择元素。...4.属性选择器 描述: 对带有指定属性的 HTML 元素设置样式, 可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性，即属性选择器在为不带有 class 或 id 的表单设置样式时特别有用...World">Hello World target="_blank" />利用属性选择器的样式...常用伪类选择器： 文档部分伪类：:first-child(表示第一个子元素)、:last-child、:only-child、:invalid 用户行为伪类: :hover(鼠标滑动到元素激活)、:focus...:active 在用户激活（例如点击）元素的时候匹配。

    57610

    CSS 伪类和伪元素知识点汇总，不可错过，让你不再困惑

    一、链接相关伪类 a:link 作用：选择未被访问过的链接。 通常用于设置未访问链接的特定样式，如颜色、下划线等。...可以用来区分已访问和未访问的链接，设置不同的样式。例如：a:visited { color: purple; } 将已访问链接的颜色设置为紫色。...a:active 作用：当链接被激活（点击但未释放鼠标按钮）时应用的样式。 用于提供链接被点击时的即时反馈。例如：a:active { color: green; } 链接被激活时变为绿色。...二、通用伪类和伪元素 :hover 作用：当鼠标悬停在任何元素上时应用的样式，并非仅限于 元素。 应用场景广泛，可以为各种元素增加交互效果。...例如，当鼠标悬停在一个 元素上时，可以改变其背景颜色或添加阴影。

    43010

    按钮样式的正确方式

    悬停(hover)，焦点(focus)和活动(active)样式 很酷，你的按钮看起来不错，但是...用户将与它进行交互，并且当按钮的状态改变时，他们需要视觉反馈。...处理focus样式 还有一个棘手的问题。 在多个浏览器中，当您单击链接或按钮时，将应用两个伪类： :active :focus 一旦停止按下鼠标按钮或触控板，“active”伪类就会停止应用。...但在某些浏览器中，focus样式会一直保留，直到用户点击页面上的其他内容为止。 在我的测试中，受影响的浏览器包括Chrome（66），Edge（16）和Firefox（60，仅用于链接）。...我们可以使用新的： :focus-visible伪类（草稿规范）来解决此问题。 这个功能还没有完全指定，但想法是浏览器只能在键盘或类似键盘的交互之后设置： :focus-visible，而不是点击。...focus-visible.js脚本后，它会为元素添加一个js-focus-visible类。

    5.1K20

    CSS选择器及优先级 总结

    important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性 同一级别 (1) 同一级别中后写的会覆盖先写的样式 (2) 同一级别css引入方式不同...相邻兄弟选择器 el + el div+p 选择与同级且紧接在其后的第一个 元素 2、属性选择器 类型 eg 描述 [attribute] [target] 选择带有 target...属性所有元素 [attribute=value] [target=_blank] 选择 target=”_blank” 的所有元素 [attribute~=value] [title~=flower]...属性值以 “def” 结尾的所有元素 [attribute*=”value”] [abc*=”def”] 选择 abc 属性值中包含子串 “def” 的所有元素 3、伪类 类型 eg 描述 :link...a:link 选择所有未被访问的链接 :visited a:visited 选择所有已被访问的链接 :active a:active 选择正在被点击的活动链接 :hover a:hover 选择鼠标指针位于其上的链接

    89720
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券