选择器的使用(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>

效果如下:

时间: 2024-10-13 22:41:38

选择器的使用(target选择器)的相关文章

CSS3中结构伪类选择器——root、not、empty、target选择器

1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="text/css"> :root{ background:yellow; } body{ background:green; } </style> 注意:不使用root选择器来指定root元素的背景色,只指定body元素的背景色,则整个页面就全部变成了绿色. 2.not选择器 如果想

CSS3之伪元素选择器和伪类选择器

伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. a:link|a:visited|a:hover|a:active 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的. 由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得

Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)

一.兄弟选择器 相邻兄弟选择器 - 相邻兄弟选择器匹配指定元素的相邻兄弟元素 - 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 - 使用加号(+)作为结合符 通用兄弟选择器 - 通用兄弟选择器匹配某元素后面的所有兄弟元素 - 使用符号(~)作为结合符,即 element1~element2 - 两种元素必须拥有相同的父元素,但是element2不必直接紧随element1 二.属性选择器 属性选择器 - 属性选择器能够将元素附带的属性用于选择器中,从而对带

CSS后代选择器,子选择器和相邻兄弟选择器

平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li之间用空格隔开]子选择器的标识为:> 如:ul>li{width:150px;}[ul和li之间用>隔开]相邻兄弟选择器的标识为:+ 如:h1 + p {margin-top:50px;}[h1和p之间用+隔开] ②功能不一样:后代选择器(descendant selector),又称为包含

H5 14-后代选择器和子元素选择器

14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14-后代选择器和子元素选择器</title> </head> <body> <!-- 1.后代选择器和子元素选择器之间的区别? 1.1 后代选择器使用空格作为连接符号 子元素选择器使用>作

03 通配符选择器 选择器深入讨论(父子选择器、多选择器并存问题、优先级)

通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器. * {margin: 0;padding: 0} *(表示所有的元素) 可以让所有html元素的外边框和内边距都默认为0,有时特别有用. 不同的浏览器对不同的左边距和上边距的指定大小是不一样的 一般网页设计师把被内边距和上边距清零,这样就可以避免不同浏览器因边距不同导致打开网页后布局混乱. 这样我们就可以通配符 Margin外边距:定义元素周围的空间. Padding内边距:元素边框与元素内容之间的空白. css11-1.

CSS3每日一练之选择器-结构性伪类选择器

<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title> <style type="text/css"> *{margin:0; padding:0;} #list{font-family:"Micro

CSS3 01. CSS3现状、属性选择器、伪类选择器、

CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 | 表示 多选一 ? 表示 0个或1个 * 表示 0个或多个 {}表示范围  {A}代表出现A次 ,{A,B}代表出现A次以上B次以下 ,B可以省略,{A,} 代表至少出现A次,无上限 # 出现1次以上,以逗号隔开,可以选择后面跟大括号的方式精确表示重复次数:<length>#{1,4}. !代表

CSS之固定定位,绝对定位+负边距,双飞翼布局,属性选择器,伪类选择器补,状态伪类选择器,相邻全部兄弟选择器,取非选择器,em与rem,变形效果

固定定位: 绝对定位+负边距 !!!!!!!!!!!!!!!!!!!超重要 负边距 双飞翼布局 属性选择器 伪类选择器 补 状态伪类选择器 相邻全部兄弟选择器 取非选择器 em与rem 变形效果 固定定位: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #div1 { height: 1200px; backgr