CSS3学习笔记之目标伪类选择器

最新推荐文章于 2024-07-18 16:42:05 发布

atleks

最新推荐文章于 2024-07-18 16:42:05 发布

阅读量3.9k

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/atleks/article/details/38966691

版权

本文介绍了CSS3中的目标伪类选择器`:target`，该选择器用于选取文档中URI标识符所指定的目标元素。通过`:target`，可以为页面中特定ID被激活时设置样式，从而实现动态效果。了解其语法和用法对于提升页面交互体验至关重要。

摘要由CSDN通过智能技术生成

目标伪类选择器用来匹配文档（页面）的URI中某个标识符的目标元素。URI中的标识符通常会包含一个丼号，后面带有一个标识符名称，例如#contact:target就是用来匹配ID为contact的元素被URI选中时候的样式的，:target伪类选择器选取链接的目标元素，然后供定义样式。

目标伪类选择器语法如下：

选择器	功能描述
E:target	选择匹配E的所有元素，且匹配元素被相关URL指向

目标伪类选择器是动态选择器，只有存在URL指向该匹配元素的时候，样式效果才会生效。

目标伪类选择器需要IE9以及以上，opera9.6以及以上，还有所有版本的chrome，FF，Safari都支持。

下面的程序通过目标伪类选择器实现手风琴效果：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>垂直手风琴</title>
	<style type="text/css">
.accordionMenu {
	background: #fff;
	color:#424242;
	font: 12px Arial, Verdana, sans-serif;
	margin:0 auto;
	padding: 10px;
	width: 500px;
}
.accordionMenu h2 {
	margin:5px 0;
	padding:0;
	position: relative;
}
.accordionMenu h2:before {
	border: 5px solid #fff;
	border-color: #fff transparent transparent;
	content:"";
	height: 0;
	position:absolute;
	right: 10px;
	top: 15px;
	width: 0;
} 
.accordionMenu h2 a {
	background: #8f8f8f;
	background: -moz-linear-gradient( top, #cecece, #8f8f8f); 
	background: -webkit-gradient(linear, left top,

最低0.47元/天解锁文章

atleks

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记之目标伪类选择器

目标伪类选择器用来匹配文档（页面）的URI中某个标识符的目标元素。URI中的标识符通常会包含一个丼号，后面带有一个标识符名称，例如#contact:target就是用来匹配ID为contact的元素被URI选中时候的样式的，:target伪类选择器选取链接的目标元素，然后供定义样式。目标伪类选择器语法如下：选择器功能描述E:target选择匹配E的所
复制链接

扫一扫