CSS 4.2.4参考手册
目录搜索
提交中...

©
本文档使用 php.cn手册 发布

文字
分享

语法：

E:target { sRules }

说明：

匹配相关URL指向的E元素。

解释：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。

示例代码：

#demo:target{color:#f00;} <div id="demo"> <p>E:target伪类使用方法</p> </div>

假设上述代码在页面 a.html 中，那么当访问 a.html#demo 时，这个div元素将会被:target命中

兼容性：

  • 浅绿 = 支持

  • 红色 = 不支持

  • 粉色 = 部分支持

IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
6.0-8.02.0+4.0+3.1+3.5+3.2+2.1+18.0+
IE9.0+

示例：

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>目标伪类选择符 E:target_CSS参考手册_web前端开发参考手册系列</title>

<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />

<style>

.test .hd{padding:10px 0;}

.test .nav{position:fixed;right:10px;left: 540px;}

.test .nav a{display:block;margin: 10px 0;}

.test .bd .panel{width:500px;margin-top:5px;border:1px solid #ddd;}

.test .bd h2{border-bottom:1px solid #ddd;}

.test .bd .panel:target{border-color:#f60;}

.test .bd .panel:target h2{border-color:#f60;}

h2,p{margin:0;padding:10px;font-size:16px;}

</style>

</head>

<body>

<div class="test">

    <div class="hd nav">

        <a href="#panel1">前往区块1</a>

        <a href="#panel2">前往区块2</a>

        <a href="#panel3">前往区块3</a>

        <a href="#panel4">前往区块4</a>

        <a href="#panel5">前往区块5</a>

    </div>

    <div class="bd">

        <div id="panel1" class="panel">

            <h2>区块1</h2>

            <div><p>区块1内容</p><p>区块1内容</p><p>区块1内容</p></div>

        </div>

        <div id="panel2" class="panel">

            <h2>区块2</h2>

            <div><p>区块2内容</p><p>区块2内容</p><p>区块2内容</p></div>

        </div>

        <div id="panel3" class="panel">

            <h2>区块3</h2>

            <div><p>区块3内容</p><p>区块3内容</p><p>区块3内容</p></div>

        </div>

        <div id="panel4" class="panel">

            <h2>区块4</h2>

            <div><p>区块4内容</p><p>区块4内容</p><p>区块4内容</p></div>

        </div>

        <div id="panel5" class="panel">

            <h2>区块5</h2>

            <div><p>区块5内容</p><p>区块5内容</p><p>区块5内容</p></div>

        </div>

    </div>

</div>

</body>

</html>

            


运行实例 »

点击 "运行实例" 按钮查看在线实例

上一篇：E:disabled下一篇：@page:first