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

一、a标签的四大伪类

  • :link：未访问状态

  • :hover：悬浮状态

  • :active：活跃状态

  • :visited：已访问状态

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

  1. <style type="text/css">
  2.         a {
  3.             color: #333;
  4.             text-decoration: none;
  5.         }
  6.         /*:link为一个整体,代表超链接的初始状态*/
  7.         a:link {
  8.             color: orange;
  9.         }
  10.         /*:hover鼠标悬浮*/
  11.         a:hover {
  12.             color: green;
  13.             /*鼠标样式*/
  14.             cursor: pointer;
  15.         }
  16.         /*:active活动状态中(被鼠标点击中)*/
  17.         a:active {
  18.             color: red;
  19.         }
  20.         /*:visited访问过的状态*/
  21.         a:visited {
  22.             color: cyan;
  23.         }

二、内容伪类

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

  • :before：内容之前

  • :after：内容之后

  1. .txt:before {
  2.             content: "我是前缀~~~"
  3.         }
  4.         .txt:after {
  5.             content: ">>>我是后缀"
  6.         }

三、索引伪类

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

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

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

四、取反伪类

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

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

五、案例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>伪类选择器</title>
  6.     <style type="text/css">
  7.         a {
  8.             color: #333;
  9.             text-decoration: none;
  10.         }
  11.         /*:link为一个整体,代表超链接的初始状态*/
  12.         a:link {
  13.             color: orange;
  14.         }
  15.         /*:hover鼠标悬浮*/
  16.         a:hover {
  17.             color: green;
  18.             /*鼠标样式*/
  19.             cursor: pointer;
  20.         }
  21.         /*:active活动状态中(被鼠标点击中)*/
  22.         a:active {
  23.             color: red;
  24.         }
  25.         /*:visited访问过的状态*/
  26.         a:visited {
  27.             color: cyan;
  28.         }
  29.         /*普通标签运用: :hover :active*/
  30.         .box {
  31.             width: 200px;
  32.             height: 200px;
  33.             background-color: red;
  34.         }
  35.         .box:hover {
  36.             background-color: orange;
  37.             cursor: pointer;
  38.         }
  39.         .box:active {
  40.             width: 400px;
  41.             border-radius: 50%;
  42.         }
  43.  
  44.         /*内容伪类*/
  45.         .txt:before {
  46.             content: "我是前缀~~~"
  47.         }
  48.         .txt:after {
  49.             content: ">>>我是后缀"
  50.         }
  51.  
  52.         /*伪类可以单独出现*/
  53.         /*:after {
  54.             content: "呵呵"
  55.         }*/
  56.  
  57.         /*位置伪类*/
  58.         /*1.位置从1开始*/
  59.         /*2.*/
  60.         /*先匹配位置,再匹配类型: 找到所有结构下的第2个标签,如果刚好是div,那么匹配成功*/
  61.         /*body a-baidu div01*/
  62.         div:nth-child(2) {
  63.             color: green;
  64.         }
  65.  
  66.         /*先确定类型,再匹配位置*/
  67.         /*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/
  68.         div:nth-of-type(2) {
  69.             color: cyan;
  70.         }
  71.  
  72.         /*2n*/
  73.         /*
  74.             div ooo div
  75.             ooo div ooo
  76.             div ooo div
  77.         */
  78.  
  79.         /*3n*/
  80.         /*
  81.             div div ooo
  82.             div div ooo
  83.             div div ooo
  84.         */
  85.  
  86.         /*3n - 1*/
  87.         /*
  88.             div ooo div
  89.             div ooo div
  90.             div ooo div
  91.         */
  92.  
  93.         /*取反伪类*/
  94.         /*:not([d]) {
  95.             color: red;
  96.         }
  97.         body.body {
  98.             color: orange;
  99.         }*/
  100.         span:not([d]) {
  101.             color: red;
  102.         }
  103.     </style>
  104. </head>
  105. <body class="body">
  106.     <!-- 1.a标签的四大伪类 -->
  107.     <a href="./123.html">访问页面</a>
  108.     <a href="https://www.baidu.com">访问过页面</a>
  109.     <div class="box">box</div>
  110.  
  111.     <!-- 2.内容伪类 -->
  112.     <div class="txt">原来的文本</div>
  113.  
  114.     <!-- 3.位置伪类 -->
  115.     <div class="wrap">
  116.         <span>span01</span>
  117.         <div>div01</div>
  118.         <div>div02</div>
  119.     </div>
  120.  
  121.     <!-- 4.取反伪类 -->
  122.     <span d>12345</span>
  123.     <span dd>67890</span>
  124. </body>
  125. </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. dubbo超时原理以及解决方案

    dubbo超时原理以及解决方案 本篇主要记录dubbo中关于超时的常见问题,实现原理,解决的问题 超时问题 为了检查对dubbo超时的理解,尝试回答如下几个问题,如果回答不上来或者不确定那么说明此处需 ...

  2. java 重新学习 （六）

    一.java7以后,使用带泛型的接口,类定义变量,那么调用构造器创建对象时构造器的后面不必带上泛型.List<String> list = new ArrayList()<>; ...

  3. 免费服务器AWS免费使用一年详细教程

    AWS免费使用详细教程 福利,亚马逊AWS免费试用一年,简直是爽歪歪.无论是搭建网站,还是自建**,都是不错的选择.详细如下: 开始准备:信用卡一张. 详细视频教程见:http://v.youku.c ...

  4. Xshell与securecrt对比

    一.功能对比1.Xshell功能- 支持布局切换- 可调整Script执行顺序- 提供多标签功能- 对linux支持度高- 支持IPv6- 全球用户的多语言支持- 支持用户定义的键映射- 灵活和强大的 ...

  5. Excel解析工具POI

    HSSFWorkbook:是操作Excel2003以前(包括2003)的版本,扩展名是.xls XSSFWorkbook:是操作Excel2007的版本,扩展名是.xlsx 对于不同版本的EXCEL文 ...

  6. java虚拟机规范(se8)——java虚拟机的编译(一)

    本文翻译自:https://docs.oracle.com/javase/specs/jvms/se8/html/jvms-2.html 第三章 java虚拟机的编译 java虚拟机是设计用来支持ja ...

  7. MySQL-技术专区-数据库权限管理

    前言 学习mysql数据库,对于它的权限的管理是关键的一环.所以,下面介绍的是MySQL权限的管理. MySQL权限表 MySQL数据库实际上是通过将用户写入mysql库中对应的权限表来控制访问权限的 ...

  8. mySQL学习入门教程——2.创建表

    二.创建表 一.创建数据表的SQL语句模型(弱类型)CREATE TABLE [IF NOT EXISTS] 表名称(字段名1 列的类型[属性][索引],字段名2 列的类型[属性][索引],-字段名n ...

  9. tar 和gzip 的区别

    首先要 弄清两个概念:打包和压缩. 打包是指将一大堆文件或目录什么的变成一个总的文件, 压缩则是将一个大的文件通过一些压缩算法变成一个小文件. 为什么要区分这两个概念呢?其实这源于Linux中的很多压 ...

  10. html iframe js frame

    <iframe> 语法<iframe id="productList" src=""../common/emxTable.jsp?table= ...