问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

：target的使用方法，只明白#box：target， div：target是什么意思？

头像
梁志芳
    15916

    以下代码样式中div：target+a不明白什么意思？“+”号我明白，不明白为啥div：target？target的前面不应该是a标签的url地址吗？

    <!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            float: left;
            width: 120px;
            height:50px;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
            background: #000;
            color: #fff;
            border:2px solid #fff;

        }
        div{
            position: absolute;
            top:80px;
            width: 300px;
            height:300px;
            background: yellow;
            display: none;
        }
        #box1:target{
            display: block;
        }
        #box2:target{
            display: block;
        }
        #box3:target{
            display: block;
        }
        div:target+a{
            background: red;
        }
    </style>
</head>
<body>

<div id="box1">第一个内容第一个内容</div>
<a href="#box1">第一个内容</a>

<div id="box2">第二个内容第二个内容</div>
<a href="#box2">第二个内容</a>

<div id="box3">第三个内容第三个内容</div>
<a href="#box3">第三个内容</a>
<!--
    :target
        选取当前地址栏后面的url进行匹配
-->
</body>
</html>
    csshtml
    阅读 6.6k
    2 个回答
    得票最新
    头像
    某熊猫桑
      16.1k61547
      ✓ 已被采纳

      target伪类你可以把它理解为“被访问”，所以如果a标签里的锚点被命中，那么div:target+a这句规则的意思就是：
      如果div被访问,那么与它相邻的a元素(+是相邻关系选择符)的样式为blablablabla~

      头像
      胡志强
        1
        新手上路，请多包涵

        伪类选择器

        target 选择器会突出显示当前活动的 HTML 锚。

        定义和用法
        URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

        :target 选择器可用于选取当前活动的目标元素。

        所有主流浏览器均支持 :target 选择器，除了 IE8 及更早的版本。

        <!DOCTYPE html>
<html>
<head>
<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>

<h1>这是标题</h1>

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>

<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>

<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

<p><b>注释：</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>

</body>
</html>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题