a标签的伪类、内容伪类、索引伪类、取反伪类

一、a标签的四大伪类

  • :link:未访问状态

  • :hover:悬浮状态

  • :active:活跃状态

  • :visited:已访问状态

四大伪类也可用于其他标签

<style type="text/css">
a {
color: #333;
text-decoration: none;
}
/*:link为一个整体,代表超链接的初始状态*/
a:link {
color: orange;
}
/*:hover鼠标悬浮*/
a:hover {
color: green;
/*鼠标样式*/
cursor: pointer;
}
/*:active活动状态中(被鼠标点击中)*/
a:active {
color: red;
}
/*:visited访问过的状态*/
a:visited {
color: cyan;
}

二、内容伪类

内容伪类的内容不能被选中

  • :before:内容之前

  • :after:内容之后

.txt:before {
content: "我是前缀~~~"
}
.txt:after {
content: ">>>我是后缀"
}

三、索引伪类

  • :nth-child(n):位置优先,再匹配类型

  • :nth-of-type(n):类型优先,再匹配位置

/*1.位置从1开始*/
/*2.*/
/*先匹配位置,再匹配类型: 找到所有结构下的第2个标签,如果刚好是div,那么匹配成功*/
/*body a-baidu div01*/
div:nth-child(2) {
color: green;
} /*先确定类型,再匹配位置*/
/*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/
div:nth-of-type(2) {
color: cyan;
}

四、取反伪类

除了selector以后的标签中内容操作

  • :not(selector):对selector进行取反

五、案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
a {
color: #333;
text-decoration: none;
}
/*:link为一个整体,代表超链接的初始状态*/
a:link {
color: orange;
}
/*:hover鼠标悬浮*/
a:hover {
color: green;
/*鼠标样式*/
cursor: pointer;
}
/*:active活动状态中(被鼠标点击中)*/
a:active {
color: red;
}
/*:visited访问过的状态*/
a:visited {
color: cyan;
}
/*普通标签运用: :hover :active*/
.box {
width: 200px;
height: 200px;
background-color: red;
}
.box:hover {
background-color: orange;
cursor: pointer;
}
.box:active {
width: 400px;
border-radius: 50%;
} /*内容伪类*/
.txt:before {
content: "我是前缀~~~"
}
.txt:after {
content: ">>>我是后缀"
} /*伪类可以单独出现*/
/*:after {
content: "呵呵"
}*/ /*位置伪类*/
/*1.位置从1开始*/
/*2.*/
/*先匹配位置,再匹配类型: 找到所有结构下的第2个标签,如果刚好是div,那么匹配成功*/
/*body a-baidu div01*/
div:nth-child(2) {
color: green;
} /*先确定类型,再匹配位置*/
/*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/
div:nth-of-type(2) {
color: cyan;
} /*2n*/
/*
div ooo div
ooo div ooo
div ooo div
*/ /*3n*/
/*
div div ooo
div div ooo
div div ooo
*/ /*3n - 1*/
/*
div ooo div
div ooo div
div ooo div
*/ /*取反伪类*/
/*:not([d]) {
color: red;
}
body.body {
color: orange;
}*/
span:not([d]) {
color: red;
}
</style>
</head>
<body class="body">
<!-- 1.a标签的四大伪类 -->
<a href="./123.html">访问页面</a>
<a href="https://www.baidu.com">访问过页面</a>
<div class="box">box</div> <!-- 2.内容伪类 -->
<div class="txt">原来的文本</div> <!-- 3.位置伪类 -->
<div class="wrap">
<span>span01</span>
<div>div01</div>
<div>div02</div>
</div> <!-- 4.取反伪类 -->
<span d>12345</span>
<span dd>67890</span>
</body>
</html>

前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类的更多相关文章

  1. HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  2. python 46 边界圆角 、a_img_list标签 、伪类选择器

    一:边界圆角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  3. a标签伪类选择器以及伪元素:hover的案例

    1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...

  4. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  5. CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

  6. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  7. CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  8. 前端之CSS——CSS选择器

    一.CSS介绍 为什么需要CSS(CSS的作用)? 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改 ...

  9. CSS 类选择器(四)

    一.类选择器 类选择用使用"."(英文点号)进行标识,后面紧跟类名 如: .red{color:red;} 类样式可以应用于文档中的多个元素,这体现了CSS代码的可重用性,帮助用户 ...

随机推荐

  1. LeetCode&mdash;&mdash;Best Time to Buy and Sell Stock III (股票买卖时机问题3)

    问题: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...

  2. Atitti 知识图谱构建方法attilax 总结

    Atitti 知识图谱构建方法attilax 总结   1.1. 知识图谱schema构建(体系化)1 1.2. 纵向垂直拓展(向上抽象,向下属性拓展)2 1.3. 横向拓展2 1.4. 网拓展2 1 ...

  3. Android与.Net交互模拟用户屏幕操作添加APN和网络4G/3G切换

    前几天接到一个需求,我们的客户需要对手机网络接入点进行可用性测试,简单点说就是需要实现Android上的APN配置的添加,APN切换网络模式4G/3G/2G切换,我要调研下写个demo. 因为是要实现 ...

  4. Ubuntu环境下配置Nginx

    /etc/nginx目录文件下: drwxr-xr-x   5 root root 4096 Apr 27 12:47 ./ drwxr-xr-x 104 root root 4096 Apr 27 ...

  5. STC89C52单片机内部EEPROM驱动

    STC89C52单片机自身带有4K的存储空间,分为8个扇区,每个扇区512字节,第一扇区起始地址为:0x2000, 结束地址为:21FF, 第八扇区起始地址为0x2E00,结束地址是2FFF #inc ...

  6. [LeetCode] Shortest Distance to a Character 到字符的最短距离

    Given a string S and a character C, return an array of integers representing the shortest distance f ...

  7. HTML(三)

    html图像.绝对路径和相对路径 html图像 <img>标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失败时显示的文字 ...

  8. 关于django1.7.7使用ajax后出现“CSRF token missing or incorrect”问题的解决办法

    最近使用Python3.3.25和django1.7.7开发公司项目,在使用ajax来post数据时,居然一直提示:403错误,原因是“CSRF token missing or incorrect” ...

  9. ubuntu配置chrome git

    安装chrome (也可以直接从官网下载deb包安装) sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/ ...

  10. ubuntu mysql主从库的搭建

    1,首先我们要确定一个从库一个主库,紧记从库只能读取不能有其他的操作,如果操作写那主从就失效了,那就看看我们这么搭建主从吧! 2. 环境:Ubuntu,Mysql (主从的数据库版本必须保持一致) 主 ...