实战 target 选择器，解放生产力

已于 2022-05-11 23:42:55 修改
阅读量8.1k 收藏 43
点赞数 55
文章标签： css html html5
于 2021-09-15 09:30:35 首次发布
原创文章，禁止任何形式转载！
本文链接：https://blog.csdn.net/shangyanaf/article/details/120301852
版权
学透CSS 专栏收录该内容
56 篇文章 13 订阅 ¥99.90 ¥299.90
订阅专栏
本文介绍了CSS中的`:target`选择器，通过实例展示了如何利用它实现滑出式导航抽屉和tab切换效果。`:target`选择器用于选取当前URL片段匹配的唯一页面元素，通过改变样式实现交互功能。文章还探讨了锚点在网页开发中的作用，并提供了实战代码示例。
摘要由CSDN通过智能技术生成

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

原文链接 ==>http://sylblog.xin/archives/57

前言

在正式学习:target 之前，我们先来学习一下网页开发中的锚点。

下面是百度百科的介绍：

古代的锚是一块大石头，或是装满石头的篓筐，称为”碇“。碇石用绳系住沉

了解本专栏 订阅专栏 解锁全文
YOLO大师
关注
专栏目录
订阅专栏
大数据FLINK实时数仓项目实战
悦分享
10-06 7168
普通的实时计算优先考虑时效性，所以从数据源采集经过实时计算直接得到结果。如此做时效性更好，但是弊端是由于计算过程中的中间结果没有沉淀下来，所以当面对大量实时需求的时候，计算的复用性较差，开发成本随着需求增加直线上升。实时数仓基于一定的数据仓库理念，对数据处理流程进行规划、分层，目的是提高数据的复用性。 原始数据，日志和业务数据 。根据数据对象为单位进行分流，比如订单、页面访问等等。维度数据。对于部分数据对象进行进一步加工，比如独立访问、跳出行为，也可以和维度进行关联，形成宽表，依旧是明细数据。根据某个主题将
第一课 大数据技术之Fink1.13的实战学习-部署使用和基础概念
QnHyn
06-11 1805
Flink
CSS3新增选择器 第二部分 （:checked 选择器 :target 选择器 :disabled 选择器 :enabled 选择器）
weixin_72303943的博客
07-19 375
CSS3新增选择器 第二部分 （:checked 选择器 :target 选择器 :disabled 选择器 :enabled 选择器）
css target怎么用
xiaowu2022的博客
12-29 1015
css target是指“:target”选择器，可用于选取当前活动的目标元素，其使用语法如“#tab:target {color:blue}”，该语句表示改变锚链接指向“#tab”的元素字体颜色为蓝色。 本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。 推荐：《css视频教程》 css :target选择器 URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。 :target 选择器可用于选取当前活动的目标元素
CSS的:target伪类：动态URL定位样式的指南
最新发布
2401_85339615的博客
08-18 663
伪类选择器是CSS中用来选择元素的特定状态或属性的关键字。例如，:hover伪类用于选择鼠标悬停时的元素。:target伪类则用于选择当前URL中指向的元素。
：target 点击选择
qq_32539519的博客
07-06 965
p:target{    background: red;    }<p id="111">sadadas</p><p id="222">22222</p><a href="#111">123</a><a href="#222">
选择器的使用(target选择器)
weixin_34150503的博客
10-07 466
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style...
css3之target选择器
hhlljj0828的博客
06-17 726
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0; padding: 0; list-style: none; box-sizing: b
实战 target 选择器，解放生产力！.doc
07-08
"实战 target 选择器，解放生产力！" 在这篇文章中，我们将探索 Target 选择器的强大功能，了解它如何帮助我们实现网页开发中的锚点和 tab 切换功能。 首先，让我们来学习一下网页开发中的锚点。锚点是一种网页内...
PyTorch模型部署实战：研究到生产的无缝过渡
!...# 1. PyTorch模型部署概述 ...模型部署是指将训练好的模型应用到生产环境中，以便为终端用户提供服务。在深度学习模型部署过程中，需要关注模型的性能、效率和可伸缩性，以确保用户得到快速且准确的响应。 部署工作流
CSS :target 选择器
lengqingIT的博客
03-30 1613
HTML 用法 <body> <h1>＃ 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素</h1> <p><a href="#news1">www.warm-semi.com</a></p> <p><a href="#news2">www.warm-semi.com&...
CSS3---结构性伪类选择器—target
diyinjiao1404的博客
05-04 558
结构性伪类选择器—target :target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。 示例展示 点击链接显示隐藏的段落。 HTML代码： <h2><a href="#brand">Brand</a></h2> <div class="menuSection...
什么是CSS的:target选择器
ggq53219的博客
06-13 522
选择器只影响URL中当前的目标元素。如果用户刷新页面或者导航到另一个页面，然后再回来，之前的选中状态将不会保留，除非使用JavaScript或其他技术来保持状态。选择器用于选择当前活动的目标元素。当页面上的一个链接被点击，并且该链接指向一个页面内的元素（通过ID）时，被链接的元素就会成为目标元素，此时。这种选择器常常与页面内的导航（如Tab导航、折叠面板等）和“返回顶部”功能一起使用。下面是一个简单的例子，展示了如何使用。的元素）就会被选中，并且。，从而显示该元素的内容。在这个例子中，所有的。
html目标选择器有什么用,css :target选择器怎么用？
weixin_31458015的博客
06-03 776
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式。【相关推荐：css在线手册】例如你要改变描链接指向#tab的元素字体颜色为蓝色，哪么你可以这样写成：#tab:target {color:blue}浏...
一文了解CSS3中的新特性 ::target-text 选择器
2301_76965813的博客
03-22 591
选中一段文本，右键会出现这样的菜单，有一个“复制指向突出显示的内容的链接”选项（Edge浏览器提示略有不同），如下。方案一虽然可行，但是也有问题，一是地址栏太长，不太美观，而是我只需要分享这一小段内容出去，不需要那么多。点击这个会自动复制一段包含#:~:text=的链接，浏览器会自动处理选中文本的前后限制，保证结果的唯一性。可以看到点击这个链接后，浏览器自动跳转到指定的文本片段，并且该文本会有高亮的样式（图中的紫色背景，白色文字）。可以看到，::target-text 也是有对应的规则的，如下。
目标伪类选择器 :target
weixin_43755513的博客
08-01 614
目标伪类选择器 :target
html target选择器,target - CSS :target选择器-CSS伪类选择符
weixin_34247778的博客
06-03 868
target版本：CSS3target定义和用法target{ sRules }target说明匹配相关URL指向的E元素。解释：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。示例代码：#demo:target{color:#f00;}target伪类使用方法假设上述代码在页面 a.htm...
CSS3 选择器target
zjsfdx的博客
02-18 368
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* target */ :target{ background-color:orange; } </style> </head><body> <a href="#a1">菜单1</a>| <a
纯CSS用 :target选择器来实现点击事件
Mr_liuxiaoyang的博客
03-28 771
纯CSS用 :target选择器来实现点击事件
CSS3全解析：31种选择器实战指南
"这篇教程详细介绍了CSS3中的31种选择器用法，包括但不限于星号选择器、ID选择器、类选择器、后代选择器、标签选择器、伪类选择器等，旨在帮助读者全面掌握CSS3选择器的运用。" 在CSS3中，选择器是用于指定网页元素...
评论 39
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YOLO大师

你的打赏，我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值