标签：target 伪类 color 元素 目标 跳转 链接 CSS

:target

定义：指一个唯一的页面元素(目标元素)，其id与当前URL片段匹配。一般结合锚点链接使用

触发条件：当当前页面存在被指定的目标元素时，可修改目标元素的样式

兼容：IE8及8以下不支持、Opera9.5以下不支持

举个栗子

html代码：

  <div style='width:50%;margin:0 auto'>
    <h3>目录</h3>
    <ol>
     <li><a href="#p1">跳到第一段!</a></li>
     <li><a href="#p2">跳到第二段!</a></li>
     <li><a href="#nowhere">因为目标不存在，所以这个链接毫无用处。</a></li>
    </ol>

    <h3>我的文章</h3>
    <p id="p1">点击上面第一个链接，可以跳转到我 <i>这里</i></p>
    <p id="p2">点击上面第二个链接，同样也可以跳转到我 <i>这里。</i>爽不爽？</p>
  </div>

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;
}

效果图：

标签：target,伪类,color,元素,目标,跳转,链接,CSS
来源： https://blog.csdn.net/gavincz/article/details/89670715

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。