前端（六）—— 伪类选择器：a标签的伪类、内容伪类、索引伪类、取反伪类
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标签的伪类、内容伪类、索引伪类、取反伪类的更多相关文章
- HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- python 46 边界圆角 、a_img_list标签 、伪类选择器
一:边界圆角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- a标签伪类选择器以及伪元素:hover的案例
1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS动态伪类选择器温故
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- 前端之CSS——CSS选择器
一.CSS介绍 为什么需要CSS(CSS的作用)? 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改 ...
- CSS 类选择器(四)
一.类选择器 类选择用使用"."(英文点号)进行标识,后面紧跟类名 如: .red{color:red;} 类样式可以应用于文档中的多个元素,这体现了CSS代码的可重用性,帮助用户 ...
随机推荐
- 70、saleforce的Json输出
List<Merchandise__c> merchandise = [select Id,Name,Price__c,Quantity__c from Merchandise__c li ...
- Python单元测试示例
这是使用单元测试框架unittest进行的单元测试,并输出测试结果. 首先定义一个类,三个方法.第一个方法是判断两个字符串是否相等,第二个方法是判断结果为真:第三个方法也是判断两个字符串相等. 然后是 ...
- 27. Unittest单元测试框架的介绍与使用
unittest单元测试框架 先贴一下unittest官网地址.unittest文档开头介绍了四个重要的概念:test fixture,test case, test suite, test runn ...
- python-并发编程之进程
进程 python中创建进程模块为:multiprocessing 开销非常大 是计算机中资源分配的最小单位(内存隔离) 能利用多个CPU 由操作系统控制 同时操作内存之外的数据会产生数据的不安全 进 ...
- Idea添加Tomcat
1.菜单栏Run--Edit Configurations: 点击Defaults查看有没有Tomcat Server,没有的话点左上角+,有的话进入步骤2,没有的话进入步骤3. 2.点击左侧Tomc ...
- Sed的查，删，增，改
sed的查,删,增,改 1.sed的查找 2.sed的删除 3.sed的上下左右增加文件内容 4.sed的改
- Codeforces 1175E 倍增
题意:给你n个区间和m次询问,每次询问一个区间[l, r]至少需要几个区间覆盖? 思路:如果只有一个区间,并且区间是整个取值范围的话,这是一个经典的区间覆盖问题,我们都知道贪心可以解决.现在我们需要快 ...
- Java 注解处理器
在Android开发中常用到一些第三方注解框架来简化代码.加快开发,如ButterKnife,androidannotations. 虽然常会用到,但没研究过其生成代码的原理,趁年后不忙,又温习了注解 ...
- Linux的一些命令总结
启动终端: ctr+alt+t 终端字体放大: ctr+shift+'+',终端字体缩小: ctr+'-' ls: 查看当前目录下的文件信息 pwd: 查看目录所在的路径 touch: 创建文件 mk ...
- 启动AutoCAD时自动加载.NET开发的DLL
程序组织,建立名为*.bundle的文件夹,创建Contents子文件夹,并将dll,ico等文件放进Contents中,在*.bundle中创建PackageContents.xml文件,内容如下: ...