【CSS3】CSS3 结构性伪类选择器—target用法

「爱情、让人受尽委屈。」 2022-09-16 03:45 169阅读 0赞

## 大白话用法总结： ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>结构性伪类选择器—target</title>
        <style>
            /*#first:target {*/
            /*    background: red;*/
            /*}*/
    
            :target {
                background: yellow;
            }
        </style>
    </head>
    <body>
    
    <div id="first"><a href="#first">First</a></div>
    
    
    <div id="second"><a href="#second">Second</a></div>
    </body>
    </html>

##  ##

## CSS3 结构性伪类选择器—target ##

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

**示例展示**

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

**target的大白话总结：  
指定选择器：\#brand:target 对应的 a标签一点击,则会触发此样式！  
自动匹配全部选择器:target 只要对应的a标签点击,则匹配的选择器就自动触发样式！**

**HTML代码：**

<h2><a href="#brand">Brand</a></h2>
    <div class="menuSection" id="brand">
        content for Brand
    </div>
    
    
    .menuSection{
      display: none;
    }
    #brand:target{
      display:block;
    }
    
    :target{
        display:block;
        color:red;
    }

**CSS代码：**

**演示结果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5q-U54m55biB54ix5aW96ICFMDA3_size_14_color_FFFFFF_t_70_g_se_x_16][]

**分析：**

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对象分别设置不的样式。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5q-U54m55biB54ix5aW96ICFMDA3_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/9ecf3aa2c48144cbaf56b529b694a828.png