选择器的使用(target选择器)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
a {
text-decoration:none;
}
:target {
background-color:red;
}
</style>
</head>
<body>
<p id="menu">
<a href="#text1">示例文字1</a>|
<a href="#text2">示例文字2</a>|
<a href="#text3">示例文字3</a>|
<a href="#text4">示例文字4</a>|
<a href="#text5">示例文字5</a>
</p>
<div id="text1">
<h2>示例文字1</h2>
<p>...此处略去</p>
</div>
<div id="text2">
<h2>示例文字2</h2>
<p>...此处略去</p>
</div>
<div id="text3">
<h2>示例文字3</h2>
<p>...此处略去</p>
</div>
<div id="text4">
<h2>示例文字4</h2>
<p>...此处略去</p>
</div>
<div id="text5">
<h2>示例文字5</h2>
<p>...此处略去</p>
</div>
</body>
</html>
效果如下:


选择器的使用(target选择器)的更多相关文章
- CSS3中结构伪类选择器——root、not、empty、target选择器
1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="t ...
- CSS3 target 选择器_:target伪类的使用
target作为目标伪类选择器,是css3中的新特性之一,目前已经支持所有主流浏览器,除了 IE8 及更早的版本.target伪类的主要是用于匹配文档中uri中某个标志符的目标元素,具体来说,uri中 ...
- 实战 target 选择器,解放生产力!
大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
- CSS选择器及CSS3新增选择器
转自:http://www.cnblogs.com/libingql/p/4375354.html 1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选 ...
- CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀
CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
随机推荐
- GCC的函数声明问题
Thinking in C++ 第四章 GCC 不需要再MAIN函数前声明 编译也能通过. G++不行.
- e.Row.RowType == DataControlRowType.DataRow详解(转)
代码语句如下: protected void OnRowCreate(object sender, GridViewRowEventArgs e) { if (e.Row.RowT ...
- Android开发中查看未root真机的app数据库
在Android开发中,如果用到数据库来储存数据,那么难免就要查看数据库中的内容,可是对于未root的真机来说,查看数据库就不是那么容易了,如果仅仅为了查看数据库再把手机root了,有点得不偿失,所以 ...
- Fragment懒加载预加载
1. 预加载viewpager.setOffscreenPageLimit(2);,默认是预加载1,可以结合懒加载使用. 如果希望进入viewpager,Fragment只加载一次,再次滑动不需加载( ...
- SceneAction$$FastClassByCGLIB$$7330f7b9.invoke(int, Object, Object[]) line: not available
现象:在调试状态下,断点可以进入ACTION ,当调用service的时候,发现无法进入service中的断点,就报了题目中的错误. 过程:1.降低JDK.因为本工程是用JDK1.6编译的,maven ...
- 田字格布局html div
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- IOS 面试题系列
随着iOS平台开发的职位的增加,笔试.面试也越来越有“套路”,这里我总结了一些面试题,多数是Objective-C的基础知识,适合于面试新人,答案是我自己答的,不准确的地方,欢迎指出. 1. Ob ...
- CREATE LANGUAGE - 定义一种新的过程语言
SYNOPSIS CREATE [ TRUSTED ] [ PROCEDURAL ] LANGUAGE name HANDLER call_handler [ VALIDATOR valfunctio ...
- How To: IDENTIFY THE ASM DEVICE FROM ASMLIB
使用oracleasm querydisk可以查询到device的major和minor,从而对应. for i in `oracleasm listdisks` do oracleasm query ...
- 「 Luogu P2657 」 windy数
# 题目大意 给出区间 $[a,b]$,求出区间中有多少数满足下列两个条件 不含有前导 $0$. 相邻两个数字之差的绝对值至少是 $2$. # 解题思路 数位 $DP$,用记忆化搜索来实现.设 $dp ...