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

【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式

CSS伪类 伪类：伪类这个叫法源自于它们跟类相似，但实际上并没有类会附加到标记中的标签上。...伪类分为两种(以及新增的伪类选择器)： UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，为该元素应用CSS样式。...:hover 结构化伪类：会在标记中存在某种结构上的关系时 例如： 某元素是一组元素中的第一个或最后一个，为该元素应用CSS样式。...Selector:default 匹配Selector选择器且页面处于打开时选中状态的元素(即使当前没有被选中亦可)。...: gray; } /*鼠标移动到a标签上的时候，下划线消失*/ a:hover { text-decoration: none;/*取消a标签的下划线*/ } /*用户在链接上按下鼠标时(活动状态)

13210

【JavaScript——函数编写】请到下一步（蓝桥杯真题-7326）【合集】

="none" // 显示下一个表单页面 forms[page + 1].style.display="block" // 将步骤条中对应的步骤标记为活动状态 lists[page +...="none" // 显示上一个表单页面 forms[page - 1].style.display="block" // 将步骤条中对应的步骤取消活动状态 lists[page].classList.remove...="none" // 显示下一个表单页面 forms[page + 1].style.display="block" // 将步骤条中对应的步骤标记为活动状态 lists[page +...页面加载： 加载 HTML 页面，引入 CSS 和 JavaScript 文件。 初始状态下，只有第一个表单部分显示，其他表单部分隐藏。 步骤条中第一个步骤标记为活动状态。 2....将步骤条中对应的步骤标记为活动状态。 更新当前页面索引。 3. 点击 “返回” 按钮： 隐藏当前显示的表单部分。 显示上一个表单部分。 将步骤条中对应的步骤取消活动状态。 更新当前页面索引。

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

    移除jQuery好像也没那么难

    在 JavaScript 中，$() 或 jQuery() 的等价物是 querySelector() 或 querySelectorAll()，它们同样可以使用 CSS 选择器。...要在没有 jQuery 的情况下实现类似功能，你可以在将元素添加到 DOM 时附加事件处理程序。...").style.display = "block"; 文档就绪 如果你需要在 DOM 完全加载后再附加事件到 DOM 对象，通常会使用 (document).ready() 或常用的简写 ()。...DOM 完全加载后执行操作 */ }); 切换元素类名 通过 classList 属性，您可以方便地在 JavaScript 中添加、删除或切换类名。...检查元素是否具有指定类 如果您只想在元素具有某个类时执行某些操作，可以使用 .classList.contains() 来代替 jQuery 的 .hasClass()： // 使用 jQuery if

    1.8K10

    前端面试那些坑

    CSS优先级算法如何计算？ CSS3新增伪类有那些？ 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？ display有哪些值？说明他们的作用。...position:fixed;在android下无效怎么处理？ 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里） display:inline-block 什么时候会显示间隙？...如何阻止冒泡？ 什么是闭包（closure），为什么要用它？ javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？ 如何判断一个对象是否属于某个类？...DOM操作——怎样添加、移除、移动、复制、创建和查找节点? .call() 和 .apply() 的含义和区别？ 数组和对象有哪些原生方法，列举一下？ JS 怎么实现一个类。...怎么实例化这个类 JavaScript中的作用域与变量声明提升？ 如何编写高性能的Javascript？ 那些操作会造成内存泄漏？ JQuery的源码看过吗？能不能简单概况一下它的实现原理？

    2.9K60

    前端学习资料整理

    之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。...:enabled :disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？...当解释器寻找引用值时，会首先检索其 在栈中的地址，取得地址后从堆中获得实体 Javascript如何实现继承？...属性  　　alinkColor 活动链接的颜色(ALINK) 　　anchor 一个HTMI锚点,使用标记创建(该属性本身也是一个对象) 　　anchors array 列出文档锚点对象的数组()(该属性本身也是一个对象...常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？ 页面重构怎么操作？ 网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。

    4.2K20

    前端工程师面试题汇总

    CSS优先级算法如何计算？ CSS3新增伪类有那些？ 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？ display有哪些值？说明他们的作用。...position:fixed;在android下无效怎么处理？ 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里） display:inline-block 什么时候会显示间隙？...如何阻止冒泡？ 什么是闭包（closure），为什么要用它？ javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？ 如何判断一个对象是否属于某个类？...DOM操作——怎样添加、移除、移动、复制、创建和查找节点? .call() 和 .apply() 的含义和区别？ 数组和对象有哪些原生方法，列举一下？ JS 怎么实现一个类。...怎么实例化这个类 JavaScript中的作用域与变量声明提升？ 如何编写高性能的Javascript？ 那些操作会造成内存泄漏？ JQuery的源码看过吗？能不能简单概况一下它的实现原理？

    2.7K80

    【Html.js——效果实现】网页 PPT（蓝桥杯真题-2418）【合集】

    在播放到第一页时给“上一张”按钮 (class="btn left") 添加 disable 类，并在播放到最后一页时给“下一张”按钮 (class="btn right") 添加 disable 类，...disable类 $("section").css("display","none"); $("section").eq(activeIndex).css("display","block");...>：设置视口属性，确保网页在不同设备上正确显示。 jquery-3.6.0.min.js" ...>：引入 jQuery 库，用于后续的 JavaScript 交互。...disable类 $("section").css("display","none"); $("section").eq(activeIndex).css("display","block");...四、工作流程 ▶️ 页面加载：浏览器加载 HTML、CSS 和 JavaScript 文件，渲染页面布局，默认隐藏除第一页外的所有 PPT 页面，同时 “上一张” 按钮处于禁用状态。

    92700

    前端开发面试题

    之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。...inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。 list-item 象块类型元素一样显示，并添加样式列表标记。...JS 怎么实现一个类。怎么实例化这个类 JavaScript中的作用域与变量声明提升？ 如何编写高性能的Javascript？ 那些操作会造成内存泄漏？ JQuery的源码看过吗？...jquery.extend 为jquery类添加类方法，可以理解为添加静态方法 jquery.fn.extend: 源码中jquery.fn = jquery.prototype，所以对jquery.fn...的扩展，就是为jquery类添加成员函数 使用： jquery.extend扩展，需要通过jquery类来调用，而jquery.fn.extend扩展，所有jquery实例都可以直接调用。

    5.7K52

    看不完的那种！前端170面试题+答案学习整理（良心制作）

    7.css3动画如何在动作结束时保持状态不变 使用animation-fill-mode，值为none，表示不改变默认行为；值为forwards，当动画完成后，保持最后一个属性值；backwards，在...63.如何用jquery将一个html元素添加到dom树中 appendTo()方法，将一个html元素添加到dom树中，使用它可以在指定的dom元素末尾添加一个现存的元素或者一个新的html元素。...通过设置父标签overflow: auto 通过after伪类: {display: block; content: ''; clear: both;} 触发BFC 或 clear: both CSS...title属性是一个标记，它向每个元素添加补充信息。当鼠标指针放在元素上时，主要作用是显示工具提示。 alt是为图片指定替代文字的属性 alt是在中指定的属性标签，表示图像。...149.如何解决display:inine-block在ie6，ie7下不兼容的问题 设置float:left属性 150.如何解决ie6不支持position:fixed属性的问题 ie6下用position

    13K50

    【前端】Web前端学习笔记【2】

    相关博客： Web前端学习笔记【1】 ---- 1. this在 JavaScript 中主要有以下五种使用场景 ---- 在全局函数调用中，this 绑定全局对象，浏览器环境全局对象为 window...在构造函数中，this 绑定到新创建的对象。 使用apply或call调用函数， this 将会被显式设置为传入的的第一个参数。...CSS中 display:none 和 visibility:hidden 的区别 ---- display: none;隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢， 就当他从来不存在...使用空标签清除浮动。 这种方法是在每一个浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。...对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。（这有助于减少或消除不必要的标记。） ---- 13. new操作符具体干了什么呢?

    51720

    求职 | 史上最全的web前端面试题汇总及答案2

    :enabled :disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。 5、display与visibility有何异同？...兼容性： display:inline-block;*display:inline;*zoom:1; 14、CSS引入的方式有哪些? link和@import的区别是?...在尾部添加使用push(); 在头部添加使用unshift(); 在任意位置添加使用splice(),但要注意把它的删除个数设置为0; array详细介绍请看下文链接 JS中数组对象详解 20、简述javascript...因为它涉及浏览器兼容、跨域等问题，在项目中一般会使用一些基础类库辅助实现，如jQuery等。 一个简单的Ajax操作如下。 5、谈谈你对JSON的理解。...2、Javascript与jQuery有什么区别？ jquery 就对javascript的一个扩展，封装，就是让javascript更好用，更简单。 3、在jQuery中如何注册事件？

    8.3K20

    8个用于编写可维护，简化的前端代码的CSS策略

    1.不要写出不需要的样式定义 例如：编写display：block的时候，很多元素默认都有这种风格。 另一个例子是在元素上定义字体大小，它将继承你正在定义的正文字体大小。...编写可重用的css类可以解决一些事情: 它可以确保您的设计在不同的页面之间保持一致。当你在很多页面上共享你的CSS类时，你知道当你改变这个类时，它会在每一个出现在页面上的页面上改变。...你在流行的框架中看到的一些例子是： 例如，使用.hide，而不是每次只需要在页面上写出一个元素就写出一个新的类，你可以在你的元素上加上.hide类，它会使元素显示display: none; 。...在谈论JavaScript或jQuery插件时，我会说，对于那些与您使用的任何组件都有很好集成选项的真正常见组件来说，情况也是如此。...例如，如果我使用的是依赖于jQuery的项目，但是会在React中构建我自己的模块，那么我将使用基础模块或引导模块（仅仅是因为编写组件以便通过引入jQuery插入到React组件中）。

    1.8K90

    微信小程序实践：2.3 可滚动的容器组件之 scroll-view

    它是为了在更新后，取消下拉更新状态的。当组件处于「下拉更新」状态后，它的值变为true，此时程序要去做一些耗时的事情，例如网络加载。待处理完成了，将这个值置为false，下拉更新的状态就恢复回去了。...如果不是这个问题，可以考虑以下三点： 内容宽度是否大于外框容器宽度 可以给外框添加white-space:nowrap;display:inline-block样式，看能否解决 如果内容使用flexbox...启用enable-flex属性，与直接添加display:inline-block并不冲突。...这里有一个延伸问题，white-space设置为nowrap好理解，是不换行；display设置为inline-block是什么意思呢？为什么不设置为block或inline？...理解了inline-block样式值的作用，回头再看为什么添加display:inline-block这个样式，就好理解了。

    17.3K30

    前端入门6-JavaScript客户端api&jQuery

    以上基本的语法了解后，至少就知道如何声明变量、函数、对象，如何使用了，这就足够了，那么接下去就是熟悉下客户端 API，也可以说是浏览器按照标准提供的各 API 的使用。...所以，下面会分别介绍 W3C 规范的标准 API 和 jQuery 的使用： DOM API document document 是内置的全局变量，在 JavaScript 可以直接通过该关键字使用，使用时会获取到当前...基类 HTMLElement 对象定义的基础的方法、属性包括：获取或修改元素的指定属性，添加或移除元素某个 class，查看或修改该标签包装的内容等等。...onerror 在文档或资源加载发生错误时触发 onhaschange 在锚部分发生变化时触发 onload 在文档或资源加载完成时触发 onresize 在窗口缩放时触发 onunload 在文档从窗口或浏览器中卸载时触发...display"); class 添加 class $(selector).addClass("liItem"); //为指定元素添加类className 移除 class $(selector).removeClass

    6.8K40

    web 编写优秀 CSS 代码的 8 个策略

    1.不要写不需要的样式定义 例如：编写display:block;时要注意，因为很多元素默认有这个样式。 另一个例子是在元素上定义字体大小，它将继承你正在定义的正文字体大小。...编写旨在重用的类的作用： 确保你的设计在不同的页面之间保持一致。当你在很多页面上共享CSS类时，你知道当你改变这个类时，它会在每一个出现的页面发生改变。 这使得编写CSS真的很快。...在这些流行的框架中你所看到的一些例子是： .hide { display: none; } .text-center { text-align: center; } 例如，使用.hide，就不必每次想要在页面上隐藏元素时就得编写一个新的类...好的，那么JavaScript插件呢？ 在谈论JavaScript或jQuery插件时，我要说的是，对于任何你使用的具有很好集成选项的真正常见组件来说，情况也是如此。...例如，我会使用立即可用的Foundation或Bootstrap模块，如果我正工作于依赖jQuery的项目，但是会在React中构建我自己的模块（只是因为编写组件以便通过引入jQuery插入到React

    2.6K00
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券