:target

版本：CSS3

:targetCSS 伪类，代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配。

语法:

E:target{sRules}

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

例如，以下URL拥有一个片段(以#标识的)，该片段指向一个ID为section2的页面元素:

http://www.example.com/index.html#section2

若当前URL等于上面的URL，下面的元素可以通过:target选择器被选中：

example

浏览器支持

IE9+以及新版浏览器都支持:target

例子

:target伪类可用于加亮显示页面中可从表格内容中链接到的部分。

//html 
table of contents
jump to the first paragraph!
 
jump to the second paragraph!
 
this link goes nowhere,
   because the target doesn't exist.
my fun article
you can target this paragraph using a
  url fragment. click on the link above to try out!
this is another paragraph, also accessible
  from the links above. isn't that delightful?
//CSS

p:target {
  background-color: gold;
}

/* 在目标元素中增加一个伪元素*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: .25em;
}

/*在目标元素中使用italic样式*/
p:target i {
  color: red;
}

你可以不使用任何Javascript代码，只使用:target伪类创建一个加亮框。该技术依赖于初始化时就隐藏在页面中的链接到指定元素的锚。一旦定位，CSS就会更改其display以便显示它们。

//html 

• open example #1
• open example #2

//CSS /* unopened lightbox */ .lightbox { display: none; } /* opened lightbox */ .lightbox:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* lightbox content */ .lightbox figcaption { width: 25rem; position: relative; padding: 1.5em; background-color: lightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; } /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor: default; }

:target{
	background-color:pink;
}



	点击
	htmlCSS中文手册 

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com