css上被忽略的targe选择器

最新推荐文章于 2025-05-16 02:53:10 发布
原创 最新推荐文章于 2025-05-16 02:53:10 发布 · 305 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#targe选择器

本文展示了一个使用CSS过渡效果和伪类实现的有趣布局示例。通过HTML和CSS的结合，当点击链接时，目标div元素将动态改变大小、颜色，并调整其在页面上的位置。此demo利用了flex布局和CSS的:target伪类来实现元素的动态变化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一个有趣的demo
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: aqua;
        margin: 5;
        transition: flex 1s;
      }
      main {
        width: 600px;
        display: flex;
        justify-content: space-between;
      }
      div:target {
        flex:1;
        background-color: pink;
        word-break: break-all;
      }
    </style>
</head>
<body>
    <main>
      <a href="#1">1</a>
      <a href="#2">2</a>
      <a href="#3">3</a>
    </main>
    <main>
      <div id="1"></div>
      <div id="2"></div>
      <div id="3"></div>
    </main>
</body>
</html>
Vue3 - Element Plus 通知ElNotification组件防止多次弹出问题，解决多次弹框问题让其无论执行多少次都只弹出来一次，设置对话框无论执行多少次最终只弹一次（搞定重复弹窗问题）
资深程序员
10-24 1万+
vue3，element-plus，ElNotification，通知组件，消息提示始终只出现一个，ElementPlus通知消息多次弹出问题，解决ElNotification消息弹框重复弹出，无论调用多少次最终只让弹出来一个，axios封装请求拦截器时多个API请求接口导致弹框多次出现如何只出现一次，只有第一次弹出调用组件接口，后面弹出不在调用接口问题解决，消息弹窗不重复弹出，最新最好用的解决办法，如何让ElementPlus的消息提示每次只弹出一个，axios全局封装登录状态登录失效未登录时提示登录框
【jQuery】第四课——掌握jQuery选择器的使用，会使用jQuery选择器获取元素
王迪
09-08 2516
知识点：了解jQuery选择器的基本概念及优势、能够使用不同的jQuery选择器选取元素，比如基本选择器、层次选择器、属性选择器、基本过滤选择器、可见性过滤选择器的使用，了解使用jQuery选择器的注意事项。 页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处...
单例模式：自定义弹框
m0_57835615的博客
10-02 241
自定义弹框功能完整代码效果图 功能 自定义弹框标题 自定义弹框内容 自定义弹框确认和关闭时的回调函数 完整代码 const Dialog = (function () { class Dialog { constructor () { this.ele = document.createElement('div') this.ele.className = 'dialog' document.body.appendChild(this.ele) this.
单例模式弹出窗体实现
weixin_30799995的博客
03-05 201
有时需要多次弹出一个窗体，但是窗体较为复杂弹出缓慢，下方的单例模式实现则较好的解决了这个问题，好处是窗体是静态的，仅构造一次，第二次弹出的时候相对比较快 实现方法如下： 1 using System; 2 using System.Windows.Forms; 3 4 namespace SingleFormDemo 5 { 6 public partial...
js单例模式——创建弹窗
wangxiuyan0228的博客
03-06 2108
一、了解单例模式    单例模式的定义：保证一个类仅有一个实例，并提供一个访问他的全局访问点    单例模式的核心：是确保只有一个实例，并提供全局访问二、javascript中的单例模式    在js中，我们经常会把全局变量当做单例模式来使用，例如：        var a={};    为什么a可以当做全局变量来使用呢，因为其满足以下两个条件：        1、对象a独一无二        ...
Qt自定义messageBox弹窗，单例模式，tips/question，Qss定义样式，按钮点击返回值/信号
三分糖丶去冰的博客
09-09 2123
自定义messageBox弹窗，方便项目使用，单例模式避免弹出多个。
网页制作学习之CSS选择器
itsalittledifficult的博客
01-08 498
详细参考见http://www.runoob.com/cssref/css-selectors.html     菜鸟教程                   http://www.w3school.com.cn/cssref/css_selectors.asp     W3School 元素选择器  element{}    最基本的选择器，可以直接为标签添加css样式，主流浏览器的各个版...
CSS结构性伪类、UI伪类与动态伪类全解析：从文档结构到交互状态的精准选择
读心悦
05-13 1428
结构性伪类选择器和UI伪类选择器是CSS中用于精准定位和样式控制的重要工具。结构性伪类选择器基于元素在HTML文档树中的位置或结构特征进行匹配，如:first-child、:nth-child()等，常用于实现响应式布局和复杂文档样式。UI伪类选择器则专注于表单元素或用户界面组件的状态，如:enabled、:checked等，用于动态反馈和交互效果。这些选择器无需依赖类名或ID，通过文档结构或元素状态即可实现精准控制，广泛应用于表格斑马纹、表单验证、焦点反馈等场景，提升用户体验和界面可用性。
CSS前端示例：看似需要 JavaScript 实现的效果，其实仅用到了 CSS 的示例集合
05-09
6. **CSS Selectors的组合与组合器**：通过合理组合如`>`（子选择器）、`+`（相邻兄弟选择器）、`~`（通用兄弟选择器）等，可以实现元素间的相互影响，达到JavaScript中的某些事件监听效果。 7. **CSS calc()函数**...
前端 CSS3 选择器的高级用法详解
最新发布
AI架构全栈开发实战笔记
05-16 748
本文旨在全面解析CSS3选择器的高级特性，帮助前端开发者突破基础选择器的限制，掌握更强大、更灵活的元素选择方式。内容涵盖CSS3新增的各种选择器类型、组合技巧、性能考量以及实际应用场景。文章首先回顾CSS选择器的基础知识，然后深入探讨各种高级选择器，接着通过实际案例展示应用场景，最后讨论性能优化和最佳实践。选择器(Selector)：用于选择DOM元素并应用样式的模式伪类(Pseudo-class)：定义元素的特殊状态伪元素(Pseudo-element)：创建不在DOM中的抽象元素。
单例的使用--弹出框
07-21
使用原生JavaScript写的单例小模式，适用于大多数的form表单中。
JS 单例设计模式解读与实践（Vue 中的单例登录弹窗）
似水流年的博客
04-16 3836
前言 在之前笔者发布的一篇文章中（Vue全局手动挂载组件封装（Message, Loading, Spin类组件））有介绍到在 vue 中实现全局手动挂载登录组件的实现，这样做的好处是可以在任何页面的业务逻辑中轻松调用一行代码便拉起了登录弹窗（this.$loginPopup()）。但是当时在设计的时候还有一个问题没有考虑就是这个登录弹窗组件的调用生成方法并不是单例的，这就意味着在某些时候可能在页面上会同时弹出好几个一样的登录弹窗，而在我们的业务逻辑中一般认为登录弹窗是唯一的；因此需要对这段组件的生成代码
B端组件：你真了解弹窗吗？未必，教你分清模态、非模态、吐司等
2401_82943878的博客
03-23 1711
Hi，我是贝格前端工场，又到了和大家分享B端设计的时候，本次带来最不起眼的弹窗，把这个概念给大家讲清楚。其实在B端设计中，是没有弹窗这个概念的，英文概念叫Dialog，叫对话或者会话更合适。到了中国就得中国话，大家都叫弹窗，就跟着叫开了，本文分享几种常见的弹窗。
利用单例模式，解决toast重复弹出的问题
七月七日晴52000的博客
06-06 2620
新建类ToastUtils如下： /** * ToastUtils 利用单例模式，解决重命名toast重复弹出的问题 */ public class ToastUtils { private static ToastUtils mToastUtils; private static Toast mToast; private ToastUtils(C
css3中伪类选择器:target的使用
热门推荐
Hey firefly
04-04 1万+
参考资料　CSS3 target伪类简介今天由于在做任务13，里面有一个子任务是要求用css写出一个简单的图片轮播，刚开始真的是完全没有思路，想着不用js怎么绑定点击事件呢，看了别人的一些实现方法，发现:target是一个神奇的东西。如果想看用css3实现的图片轮播，狠狠点击这里demo刚开始接触:target时，真的是一头雾水，觉得这个是个什么东西，怎么能处理点击事件呢。看了差不多五六篇博客还有简
android dialog 模式,Android Modal Dialog实现了Singleton模式
weixin_33443333的博客
06-02 339
MY SINGLETON MODAL DIALOG CLASS⁃ public class CustomDialogMsgOneBtn⁃ {⁃⁃ private static CustomDialogMsgOneBtn _instance;⁃⁃ private UIHandler uiHandler;⁃ public Context _context;⁃ ...
Android中Dialog的使用
张小贝的博客
01-03 1125
在Android中经常要使用Dialog来实现一些提示以及一些特殊的效果，而且样式也不一样，每次都得查一大堆资料，还不一定能解决，这里总结一些常用的Dialog的实践。 普通的Dialog //普通的AlertDialog对话框 findViewById(R.id.btn_common).setOnClickListener(new View.OnClickListener() {
单例模式 需要用showdialog 如果用show需要做如下改动
weixin_30819085的博客
01-29 210
C#C#C# WinFormWinFormWinFormWinForm中中中中ShowShowShowShow与与与与ShowDialogShowDialogShowDialogShowDialog Form.Show创建新窗体后（非模式），立即返回，且没有在当前活动窗体和新窗体间建立任何关系，即在保持新窗口的情况下关闭（或最小化）现有窗体或在保留现有窗体情况下关闭（或最小化）新窗口，...
DialogFragment源码分析
weixin_33913377的博客
10-12 173
目录介绍 1.最简单的使用方法 1.1 官方建议 1.2 最简单的使用方法 1.3 DialogFragment做屏幕适配 2.源码分析 2.1 DialogFragment继承Fragment 2.2 onCreate(@Nullable Bundle savedInstanceState)源码分析 2.3 setStyl...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值