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

大白话用法总结：

<!--
    target的大白话总结：
        指定选择器：#first:target 对应的【a标签】点击,则会触发匹配【目标选择器的样式】
        自动匹配全部选择器:target 对应的【a标签】点击,自动触发只要匹配的目标选择器的样式
-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—target</title>
    <style>
        /*#first:target {*/
        /*    background: red;*/
        /*}*/

        :target {
            background: yellow;
        }
    </style>
</head>
<body>
<!--这里点击First则自动触发#first:target【优先级更高】 和 :target 选择器-->
<div id="first"><a href="#first">First</a></div>

<!--这里点击First则自动触发:target 选择器-->
<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代码：

演示结果：

分析：

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

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

大白话用法总结：

CSS3 结构性伪类选择器—target

猜你喜欢