章节
问答
课签
笔记
评论
占位
占位

CSS3 结构性伪类选择器—target

:target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子,然后再做分析。

示例展示

点击链接显示隐藏的段落。

HTML代码:

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>

CSS代码:

.menuSection{
  display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
  display:block;
}

演示结果:

分析:

1、具体来说,触发元素的URL中的标志符通常会包含一个#号,后面带有一个标志符名称,上面代码中是:#brand

2、:target就是用来匹配id为“brand”的元素(id="brand"的元素),上面代码中是那个div元素。

多个url(多个target)处理:

就像上面的例子,#brand与后面的id="brand"是对应的,当同一个页面上有很多的url的时候你可以取不同的名字,只要#号后对的名称与id=""中的名称对应就可以了。
如下面例子:
html代码:  

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
  content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
 content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
    content for aron
</div>

css代码:

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}

上面的代码可以对不同的target对象分别设置不的样式。

任务

在CSS编辑器中的第一行输入正确的代码,当你点击链接后,段落p将添加橙色背景和白色文字。

(这个题目稍微比本小节中的案例难一些,怎么样挑战一下自己!)

?不会了怎么办

target标签是否书写正确

||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
? p {
background:
      orange;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / weixin_慕容6328546
href值是盒子的id,可以形成一个锚点。在一篇文章中,多个这样的锚点组合起来就相当于书的目录,当我点击它时时,就可以跳转到我需要的位置。

最新回答 / Sunday3708229
下划线是a标签默认样式,只需要把a标签的下划线样式改掉就oka{text-decoration:none; }

最新回答 / 半仙刘
click是js点击事件,target相当于是css判断URL中锚,来相应执行对应的css代码,两者区别还是挺大的,target其实和js里面的switch挺相似

最赞回答 / 呆呆小志
#brand:target 、#brand:target p 没有不同啊,前者代表id为brand的元素 后面表示id为brand的元素内的p元素

最赞回答 / hht0856
#brand 即是id选择器也是 href的值,这两个是同一个,两个不一样的话,点击链接不会跳转,样式也不会生效。锚点知道吧

已采纳回答 / 呼__呼
看W3C的解释, :target 可用于选取当前活动的目标元素直接用ID匹配, 不代表这个目标元素就是活动的撒.

已采纳回答 / 云彩无色3804005
样式要写在head里面,内部样式要加<style></style>,<head><style>#brand:target{    background: orange;    color: #fff;}#jake:target{    background: blue;    color: #fff;}#aron:target{    background: red;    color: #fff;}<style></head>

最赞回答 / 仩渧哋寵_
按CSS3来说,添加:target要在html中有href="#brand"和id="brand"才能使用,像这样::target{display:none;    }而:target指的是id='brand'的div对象若有多个target,需要把他们分辨开:#brand:target{display:none;    }

已采纳回答 / qq_我的天空_9
a标签默认有点击的功能

已采纳回答 / 暮醉
#brand:target{},是你点击了链接样式才会生效,而直接用#,跟点不点链接无关。其实很多问题,自己亲自写代码实践一下就知道了

最新回答 / Nancy__L
可是我的貌似刷新没用,只能重新打开<...图片...>刷新过后这个效果还在。

最新回答 / changesen
代码段里加上display:none;
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言