CSS选择器（3）——动态伪类选择器

伪类选择器对于大家来说最熟悉的莫过于link、visited、hover、active，这是平时常用到的伪类选择器。而CSS3的伪类选择器可以分为6种：动态伪类选择器、目标伪类选择器、语言伪类选择器、UI状态伪类选择器、结构伪类选择器和否定伪类选择器。

动态伪类选择器

动态伪类并不存在HTML中，只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是在链接中常看到的锚点伪类，另一种为用户行为伪类。

link

链接伪类选择器（E:link），选择匹配的E元素，并且匹配的元素被定义了超链接并且未被访问过，常用于链接锚点上。

a:link
{ 
background-color:yellow;
}

visited

链接伪类选择器（E:visited），选择匹配的E元素，并匹配的元素被定义了超链接已被访问过，常用于链接锚点上。

a:visited
{ 
background-color:yellow;
}

active

用户行为伪类选择器（E:active）,选择匹配的E元素，并且匹配的元素被激活(鼠标按下)。

a:active
{ 
background-color:yellow;
}

hover

用户行为伪类选择器（E:hover），选择匹配的E元素，并且鼠标悬停在E元素上。

p:hover
{
color: yellow;
}

focus

用户行为伪类选择器（E:focus），选择匹配的E元素，并且匹配的元素获得了焦点。

a:focus
{
color:red;
}

input:focus
{
border:1px solid red;
}

目标伪类选择器

目标伪类选择器（E:target），用来匹配页面的URL中某个标识符的目标元素。具体来说，URL中的标识符通常会包含一个井号（#），后面带有一个标识符名称，例如"#contact"，目标伪类选择器就是用来匹配ID为"contact"的元素。

:target{
    background: red;
}

<h1>
    <a href="{{'#' + target}}" (click) = "change()">
        {{target}}
    </a>
</h1>
<ul>
   <li *ngFor = "let option of options" id = "{{option.id}}">
        {{option.text}}
  </li>
</ul>